这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略供我们继续深入学习研究 React 之用。前置文章列表深入理解 React JS 中的 setState从源码的角度再看 React JS 中的 setState从源码的角度看 React JS 中批量更新 State 的策略上1. batchingStrategy 策略现在我们开始来看 batchingStrategy 的策略定义。目前 React 中 batchingStrategy 的定义为ReactDefaultBatchingStrategy。ReactDefaultBatchingStrategy 包含两部分。最重要的部分 FLUSH_BATCHED_UPDATES。源码地址实现在这里。注意实现里定义了一个叫pooled的东西后续我们会展开讨论这样设计的原理与好处。React 将所有的组件丢到 pool 中去然后都交给runBatchedUpdates去执行更新操作了。同样还有一个asap的概念也在后续文章中讨论。源码地址对所有的组件进行performUpdateIfNecessary的判断并更新组件。源码地址另一个实现为 RESET_BATCHED_UPDATES用于将isBatchingUpdates重置为false等待下次组件的批量更新。源码地址2. 组件是否需要更新的比较 performUpdateIfNeeded两个逻辑比较组件是否需要更新以及第二种条件下直接进行强制更新。ReactReconciler.receiveComponent在元素级别进行了比较不过不一样那么就调用receiveComponent。其他状态直接调用updateComponent。注意这里的updateComponent函数的内部实现是递归的这样的设计便于及时获取到哪些组件是已更新的状态便于前台进行获取使用。到这里我们就把整个 React 的更新逻辑策略的部分走完了接下来我们会继续看一下 React 如何进行页面UI 的更新以及一些遗留的小知识点。 从源码的角度看 React JS 中批量更新 State 的策略（下）
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略供我们继续深入学习研究 React 之用。前置文章列表深入理解 React JS 中的 setState从源码的角度再看 React JS 中的 setState从源码的角度看 React JS 中批量更新 State 的策略上1. batchingStrategy 策略现在我们开始来看 batchingStrategy 的策略定义。目前 React 中 batchingStrategy 的定义为ReactDefaultBatchingStrategy。ReactDefaultBatchingStrategy 包含两部分。最重要的部分 FLUSH_BATCHED_UPDATES。源码地址实现在这里。注意实现里定义了一个叫pooled的东西后续我们会展开讨论这样设计的原理与好处。React 将所有的组件丢到 pool 中去然后都交给runBatchedUpdates去执行更新操作了。同样还有一个asap的概念也在后续文章中讨论。源码地址对所有的组件进行performUpdateIfNecessary的判断并更新组件。源码地址另一个实现为 RESET_BATCHED_UPDATES用于将isBatchingUpdates重置为false等待下次组件的批量更新。源码地址2. 组件是否需要更新的比较 performUpdateIfNeeded两个逻辑比较组件是否需要更新以及第二种条件下直接进行强制更新。ReactReconciler.receiveComponent在元素级别进行了比较不过不一样那么就调用receiveComponent。其他状态直接调用updateComponent。注意这里的updateComponent函数的内部实现是递归的这样的设计便于及时获取到哪些组件是已更新的状态便于前台进行获取使用。到这里我们就把整个 React 的更新逻辑策略的部分走完了接下来我们会继续看一下 React 如何进行页面UI 的更新以及一些遗留的小知识点。 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
