在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中我们分别看到了 React JS 中 setState 的异步表现并从源码的角度简单地了解了 React 中 setState 的设计结构以及原理。这篇文章继上篇文章后继续从源码的角度来了解 React 中对 State 批量更新策略的定义。同样源码的部分为了保证格式正常就直接截图了查看源码点击对应的链接直接跳转至 GitHub 查看即可。1. setState 的源码实现在 setState 的源码实现中传递过来的参数就被定义成了partialState从参数名以及参数的说明中就可以看到这只是 state 的一部分。默认都会调用this.updater.enqueueSetState(this, partialState)将 state 放进更新队列中去。而如果有传递回调函数过来的话会执行this.updater.enqueueCallback(this, callback)涉及到回调函数的部分我们后续文章会继续进行分析。源码地址2. 更新队列 ReactUpdateQueue 的定义在上面的setState定义中我们可以看到有一个updater的调用。具体的定义如下。源码地址而初始的updater的定义如下。源码地址这样最终的更新队列都指向了 ReactUpdateQueue 的源码定义中。3. ReactUpdateQueue 中的 enqueueSetState我们可以看到 ReactUpdateQueue 中的enqueueSetState的定义。源码地址继续去跟enqueueUpdate(internalInstance)的实现。源码地址4. ReactUpdates 中的 enqueueUpdate到这里我们回到了上篇文章看到 ReactUpdates 的位置。源码地址我们继续看函数开始的部分注入的两个部分。源码地址注入了两个部分ReactReconcileTransaction以及batchingStrategy。ReactReconcileTransaction 主要用于在更新 state 时页面 UI 元素的修正以及在执行生命周期函数时处理好生命周期函数与其他用户自定义函数之间的执行顺序与逻辑具体的实现可以参考它的源码。ReactReconcileTransaction 源码地址到这里我们从 setState 的定义开始梳理好了在进行更新策略前的逻辑部分下篇文章我们将直达 batchingStrategy 的内部实现看看 React 的更新逻辑策略的实现。