属性更改时，React不重新呈现组件
React是一个流行的JavaScript库，用于构建用户界面。在React中，当组件的属性发生更改时，并不会重新呈现该组件。相反，React会比较前后两个属性的差异，然后只更新需要更新的部分。
这种行为被称为"虚拟DOM"，它是React的核心机制之一。React通过使用虚拟DOM来提高性能。虚拟DOM是一个轻量级的JavaScript对象，它表示实际DOM的一种抽象。当组件的属性发生更改时，React会创建一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较。然后，React会确定需要进行更新的部分，并仅更新这些部分。
这种方式的好处是避免了不必要的DOM操作，从而提高了性能。通过只更新需要更新的部分，React可以最小化对实际DOM的访问和修改，减少了重绘和回流的次数。
虽然React会比较前后两个属性的差异并只更新需要更新的部分，但它并不会完全避免重新呈现组件。在某些情况下，即使属性没有发生变化，React也可能会重新呈现组件。例如，当组件的状态发生变化时，React会重新呈现该组件。另外，React还可以通过强制更新机制来手动触发组件的重新呈现。
总的来说，React的特性使得在属性更改时不会重新呈现组件，而是通过虚拟DOM的比较来更新需要更新的部分，从而提高了性能和效率。
关于React的更多信息，你可以访问腾讯云的React产品介绍页面：https://cloud.tencent.com/product/rea
相关·内容
1回答
物料UI开关不更改UI
、、、、
我正在使用Material UI的开关来改变多页应用程序的主题。发生的唯一错误是交换机不能从左向右移动(ui功能不会出现)，但onChange功能工作正常。我尝试了一下，结果是当我移除forceUpdate()时，material ui开关将会工作，但是组件将不会被重新渲染。forceUpdate中有什么原因导致交换机功能无法正常工作？
App.tsx：
import React from "react"
import {Switch, Route, BrowserRouter, Redirect} from "react-router-dom"
import
浏览 2提问于2020-11-24得票数 1
目前我的组件渲染了4次。看起来它正在为每个道具渲染。如果我删除了除网络之外的道具，那么它只渲染一次，但是我确实需要其他道具。我在componentDidUpdate中使用了if语句，因为我需要检测更改，但是我渲染了4次，并且我的网络属性是相同的 export class Camera extends Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.network !== this.props.network){
this.connect(this.props.network)
浏览 135提问于2021-11-08得票数 3
回答已采纳
为了更新子组件中的props对象，通常使用生命周期方法ComponentWillReceiveProps。但我意识到，可以在不侦听ComponentWillReceiveProps的情况下更新子组件的props。
例如，在以下名为App的组件中，子组件Comp能够在不侦听生命周期方法ComponentWillReceiveProps的情况下接收props。
主要的App组件：
import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp
浏览 6提问于2019-07-09得票数 2
在使用react-router时，我遇到了一个问题，即URL更改了，但实际上并没有呈现组件。下面是我的代码的样子。 history.js import { createBrowserHistory } from 'history';
export default createBrowserHistory(); index.js import { Router } from 'react-router-dom';
import history from './history';
ReactDOM.render(
<Router hi
浏览 13提问于2020-07-14得票数 0
我正在使用react-redux，并且我有一个组件连接到它。我的组件有自己的属性(变量和函数)，也有一些来自store的状态映射，使用mapStateToProps。 管理这个组件何时应该重新呈现对我们来说非常重要，为此，我们使用propsAreEqual作为React.memo的第二个参数。 ...
const mapStateToProps = (state: RootState) => ({
name: state.user.name,
});
const dispatchProps = {
editProfile: userActions.editProfile,
浏览 22提问于2020-09-14得票数 1
回答已采纳
我想知道，什么是事件，导致反应组件重新呈现。
我在任何地方都找不到完整的列表，如果有人写了事件列表，会导致React组件重新呈现，那就太好了。
浏览 2提问于2016-10-07得票数 2
回答已采纳
一旦this.setState()被调用，React组件是否会对其state进行一些检查，以查看state是否已更改。因此，在调用componentDidMount之后，将不再有一个协调阶段，如下面的代码所示：
// in constructor
this.state = {width: 0}
...
// in componentDidMount method
this.setState(() => ({ width: 0 }))
或者我需要手动执行这些检查，例如：
const width = getViewportWidth()
if (this.state.width !== wi
浏览 1提问于2018-01-05得票数 2
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 0
1回答
我遇到了一个奇怪的问题，我可以弄清楚为什么会发生。
这不应该发生，因为传递给History组件的道具还没有更新。
./components/History.js y.js
...
const History = ({ previousLevels }) => {
return (
<ScrollView style={styles.container}>
{previousLevels.reverse().map(({ date, stressValue, tirednessValue }) => {
retur
浏览 0提问于2018-07-28得票数 0
回答已采纳
1回答
我正在创建一个反应应用程序与反应路由器@最新和与代码分裂。所有操作都很好，除了布局组件，当我单击“关于链接”或“仪表板”链接时，重新呈现所有内容。请帮我解决这个问题。我已经读了很多博客文章，但没有找到对我有效的解决方案。
我为那个创建了一个存储库。
这是我的部件
主组件
const Main = () => {
// const Layout = React.lazy(()=>import('../Core/Layout'));
return (
<div>
<ErrorBoundary>
浏览 3提问于2020-11-29得票数 0
回答已采纳
我已经创建了一个呈现名称的FlatList。每一行都有自己的按钮。单击该按钮时，名称将添加到列表中，该按钮应更改颜色。
我的问题是，按钮一单击就不会改变颜色，只有当我对FlatList进行拉刷新时，它才会更改颜色。
用我的零食：
这是我的组件
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
View,
Text,
FlatList,
StatusBar,
StyleSheet,
浏览 0提问于2019-05-19得票数 2
回答已采纳
2回答
Tac趾反应
、、、
我在“反应”中写了这个抽搐脚趾游戏。我正在学习反应。欢迎反馈。我故意用单一的文件，专注于反应而不是其他方面。
<!-- 3x3 Tic tac toe implementation in React JS. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Tic Tac Toe</title>
<!-- Import react -->
<script src=
浏览 0提问于2017-03-21得票数 2
我正在尝试创建一个本地化解决方案。
为了测试目的，我有以下结构
index.js
import { Provider } from 'react-redux';
import store from './store'; //This is a redux store
import LocalizedComponent from './components/containers/HomeContainer';
function App() {
return (
<Provider store={store}>
浏览 2提问于2017-03-27得票数 0
回答已采纳
我的react App上有一个嵌套组件。 class Home extends React.Component {
constructor() {
super();
this.state = {id : "1"};
}
render() {
return <ShowChart id={this.state.id}/>;
}
} 我从主页渲染组件ShowChart，并将this.state.id作为一个道具传递。ShowChart是一个带有redux connect()的组件。 class ShowChart extends
浏览 171提问于2021-05-02得票数 0
回答已采纳
这个问题严重影响了我的表现。每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。
import React from "react";
const Content = ({children}) => {
console.log("I am rendering multiple times on each update");
return children;
};
export default function App() {
const [open, setOpe
浏览 3提问于2020-06-12得票数 1
在React Native中更改“全局”变量时，我遇到了最困难和最沮丧的时刻。我是这个语言的新手，然而，这应该比它明显要简单得多。似乎‘全局’变量是‘只读’的，并且不能是changed...but，我觉得这是不可能的。是否与React导航的使用有关？下面是一些代码。首先，我创建一个.js文件来保存我的“全局”变量对象： //'globals.js'
module.exports = {
STATUS: 'false',
}; 现在我的主要代码是'app.js'： //'app.js'
import React, { use
浏览 39提问于2020-06-24得票数 0
回答已采纳
1回答
路由器文件中的几乎所有组件都会无限运行。不知道有什么问题。由于此问题，ajax请求会发送无限的GET请求。
所有的文件看起来都像这样。
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { apiCall } from "../handlers/api";
import BasicTable from "../reusable/table";
import { loadFields }
浏览 45提问于2021-02-20得票数 0
回答已采纳
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
1回答
我是React.js的新手，最近我学到了反应中的受控输入。
代码：
下面是我所做的一个示例实现：
import React, { useState } from 'react';
const MyForm = () => {
console.log('rendered'); // Line 5
const [text1, setText1] = useState('');
const [text2, setText2] = useState('');
const onSubmit =
浏览 2提问于2020-07-23得票数 2
回答已采纳
1回答
我正在尝试为我的Meteor应用程序实现分页，使用React和mongo。为此，我向我的订阅函数传递了一个极限支持，如下所示：
export default class BookListTable extends TrackerReact(React.Component) {
constructor(props) {
super(props);
var limit = this.props.LimitProp
limit = parseInt(limit) || 5;
this.state = {
subscription: {
booksData: Meteor.subscribe(&
浏览 0提问于2016-09-13得票数 0
回答已采纳
我最近开始学习React / Redux，现在我正在尝试构建一个小的单页应用程序。
最近我遇到了一个我不明白也无法解决的问题。
让我给你看看密码：
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute
浏览 2提问于2016-07-08得票数 3
回答已采纳
我使用react-widgets中的DropdownList从json文件中创建下拉菜单(lang具有这些值)。代码如下：
<DropdownList
ref='dropdown'
data={lang}
valueField='id'
textField={item => item.name}
caseSensitive={false}
filter='contains'
浏览 0提问于2016-07-20得票数 2
1回答
我正在设计一个模态系统，其中模态可以显示在抽屉上(对于小屏幕)或作为模态窗口。
我创建了一个包装器组件，根据屏幕大小，用这两个组件中的任何一个组件包装它的子组件：
const Wrapper: React.FunctionComponent<any> = ({ children, ...props }) => {
let WrapperComponent: React.FunctionComponent
const modalType = useModalType()
if (modalType === "drawer") {
Wrap
浏览 1提问于2020-02-28得票数 1
我正在尝试将一个简单的react组件呈现到html页面，但不知道如何实现它。
// hello.js
import React from 'react';
import ReactDOM from 'react-dom';
export default class Hello extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
)
}
}
// index.html
<html>
浏览 3提问于2017-03-29得票数 0
回答已采纳
4回答
我希望每次路由改变时console.log('Refresh')都会运行(从Component1切换到Component2)。但只有在第一次渲染时才会触发。为什么？
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRout
浏览 14提问于2019-09-18得票数 27
回答已采纳
在本例中，componentDidUpdate是在设置状态跟踪时触发的。HelloMessage道具和状态没有改变，所以为什么要调用这个方法？如何防止这种情况发生？
class HelloMessage extends React.Component {
componentDidUpdate(prevProps, prevState) {
console.log('HelloMessage did update');
}
render() {
return <div>Hellooo</div>;
}
}
class A
浏览 0提问于2018-08-17得票数 1
回答已采纳
我有一个react功能组件，它显示标签和帖子列表+一些静态文本/装饰。我使用useState钩子将当前选择的标记存储在一个状态中。文章是通过使用带有tag变量的阿波罗的useQuery钩子来获取的。用户应该能够选择一个标记，它将替换当前的tag状态-因此useQuery(POSTS_QUERY)将使用新的tag变量重新运行。
const onTagSelectChange = (window: Window,
router: NextRouter,
name: string,
checked: boolean,
tagSetter: React.Dispa
浏览 0提问于2020-01-18得票数 3
1回答
我正在尝试让一个使用d3太阳爆发图的react组件工作。我面临的问题是，我需要一种方法来更新sunburst组件的缩放级别，作为外部组件的触发器。我将节点通过props发送到sunburst组件，每次有不同组件的外部输入时，该节点都会发生变化。 这是我到目前为止拥有的伪代码，但每个属性都会发生变化。 function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
const SunburstS
浏览 25提问于2021-07-13得票数 0
如何在React.createClass()中处理自定义javascript属性？
下面是一个例子：
var RouterView = React.createClass({
mixins: [Morearty.Mixin],
isAuthorized: false, // should it be part of state ??
isVerified: false, // should it be part of state ??
bindToAuthorization: function() {
if(/* blah-blah-blah *
浏览 2提问于2015-12-17得票数 0
回答已采纳
1回答
重新呈现FlatList的项目
、、、、
我正在尝试在React-Native中创建一个可扩展的FlatList。当用户按下"TouchableOpacity“组件时，它现在应该显示描述(item.Beschreibung)。我试图做到这一点，方法是将renderItem函数呈现的每一项都添加到一个数组中。它不知何故不起作用，因为"renderItem“中的条件没有被再次检查。我该如何解决这个问题呢？ const clickedItems = []
const [isClicked, setIsClicked] = useState(false)
const addMoreItems = (x) => {
浏览 13提问于2021-02-07得票数 0
1回答
我创建了一个简单的redux应用程序。在工具中，我检查“高亮更新”。然后单击任意按钮，显示所有组件都已更新，但"AddButton“中的控制台消息没有显示任何内容。错误控制台，反动开发工具还是我？
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } fro
浏览 1提问于2019-02-22得票数 1
回答已采纳
1回答
我目前正在从state获取一个道具，并在一个事件侦听器上使用它。即，
import * as React from 'react';
import { getDetails } from './actions';
interface Props {
selecting: boolean;
getDetails(): Action<void>;
}
@connect((state) => ({
selecting: state.items.selecting,
}), {
getDetails,
})
export defau
浏览 0提问于2018-03-22得票数 0
4回答
我在导航这些概念时遇到了困难，因为我从父函数中传递了一个函数，因此一个子函数一直在重新呈现。此父函数引用编辑器的值draftjs。
function Parent() {
const [doSomethingValue, setDoSomethingValue] = React.useState("");
const [editorState, setEditorState] = React.useState(
EditorState.createEmpty()
);
const editorRef = useRef<HT
浏览 0提问于2020-05-01得票数 1
回答已采纳
React的新特性-原生的，正在努力更新当前视图。我有一个组件LanguageSelector，这是由应用程序组件加载。现在，当更改语言时，我希望将App组件字符串更新为新选择的语言。 一旦用户登录，语言选择器组件也会加载到header组件中，并且可以随时更改语言。我见过this explanation，但是通过监听每个组件上的语言变化来调用this.forceUpdate()似乎不太好，而且当组件嵌套时，情况会变得更糟。 我正在使用react-native-localization，我所做的一切就是(并且它是有效的)： import LocalizedStrings from 'r
浏览 20提问于2019-09-21得票数 0
我已经创建了一个组件componentDidMount()数据，它具有从API获取数据的函数。之后，我将其导入到主组件中。主组件有一个呈现方法，其中我有一个简单的结构:第一个div -一些信息和导入的组件数据，第二个div是一个按钮，它打开一个模型，它有一些文本和按钮关闭这个模式对话框。我已经读过，componentDidMount()只在组件呈现后被调用一次。但是当我同时按下按钮打开我的模态页面时，componentDidMount()又被调用了。我需要的是，当我打开模态框时，componentDidMount()不会运行。但只有在呈现或刷新页时才运行。
主组件
import React f
浏览 1提问于2020-03-19得票数 0
回答已采纳
1回答
你能告诉我如何在react js中接收更新的道具吗?我知道componentWillReceiveProps是unsafe，我试过使用getDerivedStateFromProps，但没有工作
下面是我的代码
两秒钟后，我正在更新我的状态，该状态将传递给props
Expected output after two second
abcsssss
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.src !== "") {
return { src: nextProp
浏览 41提问于2018-12-11得票数 1
回答已采纳
我想知道在效率方面，如果我在文件中只有这一行，就像create-react-app设置的那样，
ReactDOM.render(<App />, document.getElementById('root'));
而另一个名为App的文件中的一个类，其中包含对许多其他类的调用，也可能包含对其他文件中的类的调用，这些子类中的一个小的更改将需要重新呈现整个App类，或者只重新呈现需要更改的单个或多个类。我希望这是有意义的。谢谢!
浏览 3提问于2018-07-27得票数 0
1回答
我一直在尝试通过阻止下面示例中的容器组件在每次子组件更新时重新呈现来优化应用程序。当UsersList组件的输入发生变化时，如何预渲染EditableRow组件？谢谢。链接代码：https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx
浏览 17提问于2021-10-22得票数 1
2回答
根据 answer，react redux react会比较mapStateToProps的输出，以确定组件是否需要重新呈现。
我有一个组件，尽管相关状态发生了变化，但它不会重新呈现。我将断点附加到react redux源代码中的函数，但发现该函数实际上返回false(即，如果我的组件不相等，则被比较的对象).So理想情况下，我的组件应该重新呈现。因此，我无法弄清楚为什么我的组件不能重新呈现。我猜这是因为connect函数中的性能优化。
有没有办法打印connect函数中关于重新呈现组件的检查的输出
浏览 2提问于2017-05-30得票数 1
我有一个Meteor/React应用程序，并且正在使用Meteor createContainer容器方法从Mongo收集数据并将结果传递到子组件中。我发现，当任何params更改时，Mongo查询都会重新计算(即使params不影响Mongo查询本身)，并且道具被发送到子组件上，这使得它无法正常地重新呈现。这是createContainer应该工作的方式，还是只在查询返回的数据发生变化时才发送下道具？
export default MyComponentContainer = createContainer(( params ) => {
// Some Mongo quer
浏览 4提问于2016-11-11得票数 3
回答已采纳
1回答
根据文档，我可以将变量属性动态化：。
但是，当我试图将initial属性动态化时，这并不起作用。
例如：
import React, { useState, useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
//make div appear from either bottom or right, depending on "origin" custom prop
const variant = {
hidden: (origin
浏览 2提问于2021-09-25得票数 2
React给出了一种使用React.memo来记忆组件的方法，如果属性没有变化，它实际上会停止组件的重新渲染。 import React, { memo } from 'react';
interface ComponentNameProps {
}
const ComponentName:React.FC<ComponentNameProps> = props => {
const {} = props;
return (
<div>
</div>
)
}
export d
浏览 77提问于2021-08-20得票数 0
在我们的react网站开发过程中，我们遇到了一个问题，比如说我们有一个充满不同组件的页面，我们目前的设计是所有的组件都“在”一个母组件下，当任何一个组件更新时，它会通过调用母组件的一个函数来“报告”更改的值给母亲，而母亲组件会做一些“数据消息”，然后将值存储在她的状态中。然而，由于母组件状态改变，这将导致其所有子组件重新计算/重新渲染，这会导致极高的CPU负载，浏览器甚至会因此而挂起。 我希望在这种情况下寻求建议，什么是最好的处理方法？ ?
浏览 34提问于2019-10-18得票数 0
我正在开发一个应用程序，它的一个部分包含了一个玩家列表。列表中的每一项都包含球员的名字，他/她拥有的积分和一个用来改变积分的IOS stepper。
每次我使用IOS stepper修改玩家的点数时，应用程序的状态都会根据该值进行更改。但是，包含玩家分数的文本不会被修改。render函数被调用，应用程序的状态没有变化，因此文本组件也应该改变。我发现当render函数被调用时，它会“跳过”List组件，所以它不会被渲染，也不会调用renderRow函数。
当我切换到TabBar的第二个选项卡，然后返回到第一个选项卡时，文本只显示当前玩家的分数。在这种情况下，将呈现List组件。
我认为这是一个非
浏览 5提问于2017-07-13得票数 1
基本上，我有一个非常简单的react组件。它所做的就是包装“react-intercom”，并且只有在状态发生变化时才会呈现它。为了简化这个问题，我将shouldCompoenentUpdate()方法硬连接为总是返回false。
import React from 'react';
import Intercom from 'react-intercom';
class IntercomWrapper extends React.Component {
shouldComponentUpdate(nextP
浏览 6提问于2017-09-13得票数 15
我有以下样例react代码 const A = () => {
const [value1, setValue1] = React.useState(true);
const [value2, setValue2] = React.useState(true);
return (
<div>
<div class="first-comp">
<FirstComponent data1={value1} data2={value2} />
<
浏览 283提问于2021-09-14得票数 0
回答已采纳
我有用户选择的选项，这些选项保存在父组件的状态中。父组件是带有"form“的整个网页。
当用户按下"Submit“时，我希望使用这些选项的子组件使用传递给它的这些新属性重新渲染。当您加载页面时，默认生成可见。
但是，我不希望它在“提交”被按下之前完成，只有在按下之后才能完成。
我所能想到的就是从节点中删除元素并重新生成它，但这不是使用React的好方法。如果需要更多的澄清/上下文，请让我知道。我是一个新的反应，我正在做这个项目，以熟悉它和它的行为。
谢谢!
浏览 0提问于2020-10-26得票数 0
1回答
我有一个主干文件，在其中，我使用React.renderComponent呈现一个React.renderComponent (Timer)。但是，在react组件中，我有一个状态呼叫计数器。我想从主干文件中获取这个组件的状态。虽然我将一个props.model传递给计时器，但我可以在定时器内部修改这个道具，但这将使props.model中的数据持久化，这是我不想做的。
由于Timer不是React组件的子程序，所以我无法使用refs访问Timer.stat。那么，是否有一种方法可以在其父级中获取Timer的状态？
非常感谢！
浏览 2提问于2015-10-20得票数 1
可能是一个简单的问题，有一个简单的答案，但我搞不懂。归咎于热度。我的模拟器打印‘这是一个测试’在屏幕上，当我希望它说‘改变’。我做错了什么？
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';
export default class App extends React.Component {
constructor(props)
浏览 1提问于2018-07-12得票数 1
回答已采纳
我正在尝试更新基于此页面上的作者ID显示的帖子，使用react redux和其他两个组件中的useCallBack来更新count和authorID，但下面的孩子没有更新。 Post.js import React from 'react'
import '../App.css';
import axios from 'axios'
import { Button } from '@material-ui/core';
class Posts extends React.Component {
constructor(
浏览 7提问于2021-04-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
