React学习-- React源码（4）setState机制

ゝ一世哀愁。 2022-06-14 08:57 180阅读 0赞

React通过this.state来访问state，通过this.setState来更新state。当setState被调用的时候，React会重新调用render方法来重新渲染组件。

## setState异步更新 ##

setState通过一个队列机制实现state更新。当执行setstate时，会将需要更新的state合并后放入状态队列，而不是立即更新state。这样的队列机制可以高效的批量更新state。

需要注意，不可以使用this.state.value = 1这样的方式来更新state，否则，该state将不会被放入状态队列中。

## setState循环调用风险 ##

如果在shouldComponentUpdate和componentWillUpdate中调用了setState，此时this.\_pendingStateQueue != null，则performUpdateIfNecessary方法就会调用updateComponent方法进行组件更新。但是updateComponent方法又会调用shouldComponentUpdate和componentWillUpdate，因此造成循环调用，使得浏览器内存占满后崩溃。

## setState调用栈 ##

其实，setState最终是通过enqueueUpdate执行state更新。下面我们来看enqueueUpdate到底是如何更新state的。

下图是一个简化了的setState调用栈：  
![这里写图片描述][SouthEast]

解释：  
如果处于批量更新模式，则对所有队列中的更新执行batchedUpdate方法；否则，如果不处于批量更新模式，则仅仅把当前组件即调用了setstate的组件，放入dirtyComponent数组中。

## 事务 ##

事务就是将需要执行的方法用wrapper封装起来，再通过事务提供的perform方法执行。在perform之前，先执行所有wrapper中的initialize方法，执行完perform之后（即需要执行的方法）再执行所有的close方法。一组initialize和close称为一个wrapper。

[SouthEast]: /images/20220614/9bfce543ac87414ca3e4272a456daee6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 React源码学习——render

前言本文的目的是为了通过简单的实现帮助读者更好地阅读源码，因此不会把所有的细节、边界条件都考虑到只要核心原理掌握了，再阅读源码时就不会感到那么困惑了本文写作时R

我就是我/ 2022年12月21日 06:08/ 0 赞/ 137 阅读

相关 React 中 setState(prevState=＞{ ... })

常规方式 > 连续执行2次setState,如下方式,往往只有一次效果,即后者的效果 this.setState({ count: this.s

╰半橙微兮°/ 2022年12月04日 09:24/ 0 赞/ 231 阅读

相关 React学习-- React源码（6）React Patch方法

React构建虚拟标签，执行组件的生命周期，更新state，计算diff等，这一系列的操作都是在virtualDOM中执行的，此时浏览器并未显示出更新的数据。React Pat

￡神魔★判官ぃ/ 2022年06月14日 09:22/ 0 赞/ 218 阅读

相关 React学习-- React源码（4）setState机制

React通过this.state来访问state，通过this.setState来更新state。当setState被调用的时候，React会重新调用render方法来重新渲

ゝ一世哀愁。/ 2022年06月14日 08:57/ 0 赞/ 181 阅读

相关 React学习 -- React源码（1）

React源码结构树： ![React源码目录][React] 在这些目录结构中，renderers是React代码的核心部分，它包含了大部分功能的实现。 render

红太狼/ 2022年06月14日 07:51/ 0 赞/ 264 阅读

相关 React学习-- React源码（5）diff算法

diff作为VirtualDOM的加速器，其算法上的改进优化是React整个界面渲染的基础和性能的保障。 diff会帮助我们就散出VirtualDOM中真正变化的部分，并只针

客官°小女子只卖身不卖艺/ 2022年06月13日 20:19/ 0 赞/ 206 阅读

相关深入学习react中的setState 函数

原文链接地址：[https://www.oschina.net/translate/functional-setstate-is-the-future-of-react][ht

秒速五厘米/ 2022年05月25日 13:41/ 0 赞/ 182 阅读

相关【React深入】setState的执行机制

【React深入】setState的执行机制一.几个开发中经常会遇到的问题以下几个问题是我们在实际开发中经常会遇到的场景，下面用几个简单的示例代码来还原一下。

快来打我*/ 2022年03月08日 13:48/ 0 赞/ 219 阅读

相关 React 中的setState

React 中的setState(arg1,arg2)异步操作 arg1可传入两种参数: 一种是对象 this.setState({ isAu

た入场券/ 2021年09月18日 16:00/ 0 赞/ 409 阅读

相关 react 深入异步setState

(1)多个setState一起调用会被合并成一个批处理,相同属性只会保留最后一次的结果 (2)若setState有回调函数,则会在setState的所

灰太狼/ 2021年07月25日 00:27/ 0 赞/ 415 阅读