深入react 细节之 - batchUpdate
发布网友
共1个回答
热心网友
深入理解React的batchUpdate机制
在React开发中，你可能听说过React具有批量更新策略，但具体实现如何？让我们通过一个简单的示例来探索。
尝试访问提供的预览链接，你将看到三个按钮。每个按钮的处理函数内部执行了两次setState操作。然而，结果出乎意料。实际的输出将显示这三个按钮的更新仅执行了一次。
为何React会采用这种设计？
Dan Abramov在回答中解释了React希望实现的目标：在一个tick内，不论代码何处调用setState，都应该将其合并为一次更新，以避免不必要的重渲染。这种设计旨在提高性能，减少频繁的UI更新带来的性能损耗。
为什么setTimeout内部的任务不能被批量处理？
了解`ReactDOM.unstable_batchedUpdates`的内部实现，我们知道它包含了`isBatchingUpdates`标志。这表明React基于事务机制进行更新。事务是一种对目标函数进行封装，添加预处理和后处理钩子（类似于koa中的中间件）的过程。通过`isBatchingUpdates`标志，React可以将整个函数调用栈内的多次setState操作放入待处理队列，最终统一执行。
然而，setTimeout的执行是脱离事务的，因此React无法对其进行批量处理。
Vue为什么没有这个？
Vue采用了nexttick的机制，通过事件循环将同步事件期间的所有修改合并。本质上，这是延迟的批量更新。
了解batchedUpdates的应用场景
React-easy-state等库利用了`ReactDOM.unstable_batchedUpdates`实现框架级别的批量更新API，提高了性能和响应性。
