位置: 编程技术 - 正文
深入研究React中setState源码(深入react技术栈)
编辑：rootadmin推荐整理分享深入研究React中setState源码(深入react技术栈)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:深入理解react,react useimperativehandle,深入react技术栈pdf,深入react技术栈pdf,深入react技术栈pdf,react理解,深入理解react,react深入浅出,内容如对您有帮助，希望把文章链接给更多的朋友！
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流程还是很复杂的，设计也很精巧，避免了重复无谓的刷新组件。它的主要流程如下
enqueueSetState将state放入队列中，并调用enqueueUpdate处理要更新的Component 如果组件当前正处于update事务中，则先将Component存入dirtyComponent中。否则调用batchedUpdates处理。 batchedUpdates发起一次transaction.perform()事务 开始执行事务初始化，运行，结束三个阶段 初始化：事务初始化阶段没有注册方法，故无方法要执行 运行：执行setSate时传入的callback方法，一般不会传callback参数 结束：更新isBatchingUpdates为false，并执行FLUSH_BATCHED_UPDATES这个wrapper中的close方法 FLUSH_BATCHED_UPDATES在close阶段，会循环遍历所有的dirtyComponents，调用updateComponent刷新组件，并执行它的pendingCallbacks, 也就是setState中设置的callback。标签: 深入react技术栈
本文链接地址:https://www.jiuchutong.com/biancheng/369824.html 转载请保留说明！下一篇：JavaScript canvas实现围绕旋转动画(javascript的canvas)
