为什么React在重新渲染之前不比较以前的状态和新的状态？为什么它总是在调用setState时呈现？
React在重新渲染之前不比较以前的状态和新的状态，而是总是在调用setState时呈现的原因是为了提高性能和优化渲染过程。
- 性能优化：React通过使用虚拟DOM（Virtual DOM）来实现高效的渲染。在每次组件状态更新时，React会生成一个新的虚拟DOM树，并将其与之前的虚拟DOM树进行比较，找出需要更新的部分，然后只更新这些部分。这种比较过程是相对耗时的，如果在每次更新时都比较整个状态对象，会导致性能下降。因此，React选择在调用setState时进行渲染，以减少不必要的比较操作，提高性能。
- 异步更新：React将setState操作设计为异步的，即调用setState并不会立即触发重新渲染，而是将更新放入一个队列中，然后在合适的时机进行批量更新。这样可以避免频繁的渲染操作，提高性能。因此，React在调用setState时会将新的状态记录下来，而不是立即进行比较和渲染。
总结起来，React在重新渲染之前不比较以前的状态和新的状态，而是在调用setState时呈现，是为了提高性能和优化渲染过程。这种设计可以减少不必要的比较操作，并将更新操作延迟到合适的时机进行批量处理，从而提高React应用的性能和响应速度。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我有一个具有布尔状态的简单函数组件。和按钮来改变状态。有人能解释一下，当状态改变到完全相同的状态时，组件为什么会重
浏览 3提问于2019-09-09得票数 9
回答已采纳
如果React在重新渲染之前比较(浅)前一个状态和下一个状态，它将减少许多渲染，这有助于优化性能。
根据的说法，当setState方法被调用时，React总是呈现组件及其子组件。React应该巧妙地处理组件及其子组件的不必要的重新呈现。
浏览 8提问于2018-07-21得票数 5
一旦this.setState()被调用，React组件是否会对其state进行一些检查，以查看state是否已更改。因此，在调用componentDidMount之后，将不再有一个协调阶段，如下面的代码所示：this.state = {width: 0}// in componentDidMountmethod或者我需要
浏览 1提问于2018-01-05得票数 2
1回答
在我的mongoDB中，我有一些带有嵌套对象的文档，这些对象对应于摩托车的品牌、型号和年份。字段中的所有make (在上面的示例中是honda和kawasaki)，然后返回特定make下存在的所有型号。}) } </ul>然而，在调用之后它应该
浏览 1提问于2021-02-03得票数 0
我只是在玩ReactJS，试图用useState钩子找出一些奇怪的行为。 return {isPositionCrossed}下面是控制台输出-您可以看到组件和钩子都用"true“呈现了两次(在
浏览 3提问于2021-12-31得票数 5
回答已采纳
我认为它的工作方式不同，但我不知道它是如何工作的。: 'noooo'} );}2.使用React组件状态export default class Test extends Component {this.state = { active: false }; if(this.props.name === 'Dan') {
this.<e
浏览 5提问于2019-01-30得票数 8
类组件但是，使用钩子，文档指定将状态更新为与前一个状态相同的值，not将导致(子组件的)重呈现：
退出状态</em
浏览 0提问于2019-03-27得票数 35
回答已采纳
当组件的一个道具发生变化时，它将重新复制。这就是反应的重点。所以，我想知道的是
// only executes once, on mount, right
浏览 1提问于2021-08-27得票数 0
1回答
我是个新手，我有一个关于架构和设计模式的问题。我已经完成了我的第一个项目(一个interactive turing machine sequencer，如果有人感兴趣的话。items.push(<MyReactElement></MyReactElement>)
return items
function My
浏览 18提问于2020-10-05得票数 2
回答已采纳
在下面的代码中，除非我将以前的状态传递给状态设置调用('setForm')，否则表单不会正确更新。
若要查看其运行情况，请按原样运行代码，控制台将打印“true”，表示其工作正常。如果将其替换为“validate2”(不使用以前的状态)，则无法打印“true”。在validate2中，由于这些调用的异步性质，第二个setForm调用覆盖了第一个setForm<e
浏览 7提问于2020-08-22得票数 1
回答已采纳
我试图从上下文中运行一个"setup“函数，它通过传递到上下文的函数向父节点注册一个子函数。示例：
浏览 4提问于2019-07-31得票数 1
回答已采纳
每次调用setState()时是否重新呈现所有组件和子组件？
如果是，为什么？我认为，当时的想法是，只有在状态发生变化时，才能做出尽可能少的反应。在下面的简单示例中，两个类在单击文本时都会再次呈现，尽管在随后的单击中状态不会改变，因为onClick处理程序总是将state设置为相同的<
浏览 17提问于2014-07-13得票数 641
回答已采纳
我有一个简单的React组件，每次单击按钮时都设置相同的值：import '.) => setFoo(data)}>Set Data</button> </div>}
但是呈
浏览 2提问于2021-08-18得票数 3
回答已采纳
4回答
在下面的示例中，我使用一个ES6映射作为React中的状态值：class App extends React.Component { super/16.6.3/umd/react-dom.production.min.js"></script>
单击该按钮时<
浏览 8提问于2020-06-19得票数 3
我知道当状态是原始类型时，React会在调用setState()时执行新旧状态之间的浅层比较，如果两者相同，则不会重新呈现。但是，当状态为引用类型时，React不会执行新旧之间的深度比较。基于此测试here，当我使用新构造的(虽然与人眼相同)对象执行setState<
浏览 10提问于2021-07-04得票数 1
回答已采纳
我在反应性组件中添加了生命周期方法。，即使nextProps和nextState与当前的道具和状态完全相同，组件也会调用此方法。当我比较nextProps和this.props的nextProps语句时，它们完全相同。州也是一样。
那么为什么调用shouldComponentUpdate呢？每当我更改父组件的状态时，都会
浏览 6提问于2016-04-07得票数 21
回答已采纳
我是一只在反应+流动中的新蜜蜂。当一个事件被商店发送时，我对重呈现发生的时间和方式感到有点困惑。在我的应用程序中，我正在侦听函数componentWillMount()中的一个事件，该函数在呈现发生之前被调用。它运转良好，我的观点也在更新。我只担心是什么原因导致我的组件<em
浏览 4提问于2016-07-05得票数 0
回答已采纳
我们正在使用react-router-dom配置项目。我创建了一段代码，使图标根据呈现的页面而有所不同，但在setState部件中发生了无限循环。帮帮我。class Bottom extends React.Component { iconName : 'initialIconName' this.setState(() =>({
ico
浏览 0提问于2019-05-10得票数 0
2回答
依次调用两个onChange。其中一个将数据保存到状态，并使用先前的状态生成新的状态。const onChange2 = (data) => { }; 单击按钮后调用的onChange和onChange2 <buttonconst [state, setState] = useState(0);
co
浏览 17提问于2021-10-13得票数 0
1回答
你好，我正在尝试用checkbox的数据构建一个新的组件，为了做到这一点，我有以下代码：import BottomScrollListener from"react-bottom-scroll-listener"; <&#
浏览 2提问于2020-08-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
