理解React如何实现批量状态更新

今天和大家聊一聊React如何实现批量状态更新。

引子

我们知道React的setState方法并不是同步执行的。

在React的生命周期中发生的多次setState的变更会进行合并，最终减少推送给浏览器的DOM变更次数，从而提升前端性能。

那么这部分到底是怎么实现的呢？我们来看下

Transaction

在React执行点击事件或者生命周期函数时，会使用一个Transaction对象将整个执行过程包裹成一个事务。

Transaction对象结构如下图所示

javascript

<pre>
 *                       wrappers (injected at creation time)
 *                                      +        +
 *                                      |        |
 *                    +-----------------|--------|--------------+
 *                    |                 v        |              |
 *                    |      +---------------+   |              |
 *                    |   +--|    wrapper1   |---|----+         |
 *                    |   |  +---------------+   v    |         |
 *                    |   |          +-------------+  |         |
 *                    |   |     +----|   wrapper2  |--------+   |
 *                    |   |     |    +-------------+  |     |   |
 *                    |   |     |                     |     |   |
 *                    |   v     v                     v     v   | wrapper
 *                    | +---+ +---+   +---------+   +---+ +---+ | invariants
 * perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
 * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | +---+ +---+   +---------+   +---+ +---+ |
 *                    |  initialize                    close    |
 *                    +-----------------------------------------+
 * </pre>

在Transcation对象中整个执行效果有些类似我们平时做的单元测试。

分为初始化，执行和清理。

这样就可以在我们所有生命周期函数和点击事件中的setState方法调用前设置一个环境——isBatchingUpdates。

这个环境有什么作用呢？

实际上，所有的setState会将生成一个update对象，并加入到一个队列中。

接着会调用下面的requestWork方法，进行更新的任务调度。

而在其中，会判断isBatchingUpdates是否为true。

如果是，则将任务放置在队列，等待UnbatchingUpdates时统一执行

否则，就会同步执行。

存在问题

可能聪明的小伙伴已经看出了这个地方存在的问题。

就是如果setState不在这个transcation过程中执行，那么就会导致同步更新。

也就是说如果要实现transcation的效果，必须setState在同步方法中调用。

比如说通过setTimeout方法，异步设置state。

此时setState在执行requestWork时，会发现已经处于Transcation之外了，isBatchingUpdates就会是false。

从而每次setState都会导致render，降低性能。

有兴趣的同学，可以在这个代码示例中，看到这里在普通事件和promise的回调中，setState导致的render次数不同。

解决方案

那有没有办法对这类的setState调用也进行批量执行呢？

有的。

第一种方式是，将所有的更新放到一个setState中。比如

javascript

setState({
	a:1，
	b:2
});

这样只会触发一次更新。

第二种方式是通过ReactDOM.unstable_batchedUpdates方法，这样

javascript

ReactDOM.unstable_batchedUpdates(() => {
        setState({a:1});
		setState({b:2});
      });

这里最终会调用到React的batchedUpdates方法，也是类似Transcation的方式，将执行包裹在一个BactedContext的环境中。从而实现批量调用。

参考文档：

引子 ​

Transaction ​

最新源码 ​

存在问题 ​

解决方案 ​

引子

Transaction

最新源码

存在问题

解决方案