React中setState源码详解

React作为一门前端框架，虽然只是focus在MVVM中的View部分，但还是实现了View和model的绑定。修改数据的同时，可以实现View的刷新。这大大简化了我们的逻辑，只用关心数据流的变化，同时减少了代码量，使得后期维护也更加方便。这个特性则要归功于setState()方法。React中利用队列机制来管理state，避免了很多重复的View刷新。下面我们来从源码角度探寻下setState机制。

1 还是先声明一个组件，从最开始一步步来寻源；

所以主要来看是否传入了updater参数，也就是说何时进行 new 组件；具体的updater参数是怎么传递进来的，以及是那个对象，参见

react源码分析系列文章下面的react中context updater到底是如何传递的

这里直接说结果，updater对象其实就是ReactUpdateQueue.js 中暴漏出的ReactUpdateQueue对象；

2 既然找到了setState之后执行的动作，我们在一步步深入进去

ReactUpdateQueue.js

可以看到enqueueSetState enqueueCallback 最后都会执行enqueueUpdate；

ReactUpdates.js

ReactDefaultBatchingStrategy.js

接下来我们看下React中的事物处理机制到底是如何运行的；

Transaction.js

接着会执行ReactUpdates.js中的flushBatchedUpdates方法

ReactUpdates.js中

ReactReconciler.js中

ReactCompositeComponent.js

this.state的更新会在_processPendingState执行完执行。所以两次setState取到的都是this.state.count最初的值0，这就解释了之前的现象。其实，这也是React为了解决这种前后state依赖但是state又没及时更新的一种方案，因此在使用时大家要根据实际情况来判断该用哪种方式传参。来看个小例子直观感受下

setState流程还是很复杂的，设计也很精巧，避免了重复无谓的刷新组件。它的主要流程如下

1. enqueueSetState将state放入队列中，并调用enqueueUpdate处理要更新的Component

2. 如果组件当前正处于update事务中，则先将Component存入dirtyComponent中。否则调用batchedUpdates处理。

3. batchedUpdates发起一次transaction.perform()事务

4. 开始执行事务初始化，运行，结束三个阶段

1. 初始化：事务初始化阶段没有注册方法，故无方法要执行

2. 运行：执行setSate时传入的callback方法，一般不会传callback参数

3. 结束：更新isBatchingUpdates为false，并执行FLUSH_BATCHED_UPDATES这个wrapper中的close方法

5. FLUSH_BATCHED_UPDATES在close阶段，会循环遍历所有的dirtyComponents，调用updateComponent刷新组件，并执行它的pendingCallbacks, 也就是setState中设置的callback。

相关推荐：

React与Preact中关于setState的区别

React 高阶组件入门实例分享

JavaScript框架Angular和React区别大解析

以上就是React中setState源码详解的详细内容，更多请关注Gxl网其它相关文章！