springleo's blog

# React setState是异步吗

React官网对于setState的说明：

将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能，React可能会推迟它，稍后会一次性更新这些组件。React不会保证在setState之后，能够立刻拿到改变的结果。

以上说明执行setState时，有可能是异步（大部分情况下）更新组件（包括重新render ui以及及时修改组件this.state）。React为什么要做成大部分setState是异步的呢？有哪些情况是进行同步更新组件并且更新this.state的呢？

先说答案：在组件生命周期或React合成事件中，setState是异步；在setTimeout或者原生dom事件中，setState是同步。

为什么react大部分情况setState是异步的呢？假如所有setState是同步的，意味着每执行一次setState时（有可能一个同步代码中，多次setState），都重新vnode diff + dom修改，这对性能来说是极为不好的。如果是异步，则可以把一个同步代码中的多个setState合并成一次组件更新。

举个例子：

var Counter = React.createClass({
        getInitialState: function () {
          return { count: 0 };
        },
        handleClick: function () {
          // 同步代码中，多次setState最终只会执行一次组件更新（组件更新意味着this.state拿到最新值）
          this.setState({count: 1, }, (state) => {
            this.setState({ count : 3})
            console.log(this.state, 'next update') // 2
          });
          this.setState({ count: 2 });
          console.log(this.state, 'first') // 0 这就是大家常说的setState是异步过程，因为执行后组件state(this.state)没有改变

          // 同步表现
          setTimeout(() => {
              this.setState({count: 4})
              console.log(this.state, 'setTimeout') // 4 在setTimeout中执行setState，同步渲染ui以及及时更新this.state(同步表现)
          }, 0)
        },
        render: function () {
          console.log(this.state, 'render') // 2

          return (
            <button onClick={this.handleClick}>
              Click me! Number of clicks: {this.state.count}
            </button>
          );
        }
      });
      ReactDOM.render(
        <Counter />,
        document.getElementById('container')
      );
// 初始化时
{count: 0} "render"
// 单击按钮后
embedded:16 {count: 0} "first"
embedded:25 {count: 2} "render"
embedded:13 {count: 2} "next update"
embedded:25 {count: 3} "render"
embedded:25 {count: 4} "render"
embedded:20 {count: 4} "setTimeout"

react setState是如何实现的呢？异步更新的原理是什么呢？（以下源码分析基于react15.6）

# setState异步实现

ReactComponent.prototype.setState = function(partialState, callback) {
  this.updater.enqueueSetState(this, partialState);
  if (callback) {
    this.updater.enqueueCallback(this, callback, 'setState');
  }
};

enqueueSetState: function(publicInstance, partialState) {
    // 找到需渲染组件
    var internalInstance = getInternalInstanceReadyForUpdate(
      publicInstance,
      'setState',
    );

    if (!internalInstance) {
      return;
    }

    // 每次都把新的state，push到队列中。
    // 方便后面一次性更新组件时，聚合成最新的state
    var queue =
      internalInstance._pendingStateQueue ||
      (internalInstance._pendingStateQueue = []);
    queue.push(partialState);

    // 更新
    enqueueUpdate(internalInstance);
  },

//代码位于ReactUpdateQueue.js
function enqueueUpdate(internalInstance) {
  ReactUpdates.enqueueUpdate(internalInstance);
}
//代码位于ReactUpdates.js
function enqueueUpdate(component) {
  ensureInjected();

  // 未开启事务流程：开启事务 + 更新组件
  // 在生命周期以及合成事件情况下，isBatchingUpdates=true
  // 在setTimeout以及原生DOM事件情况下，isBatchingUpdates=false
  if (!batchingStrategy.isBatchingUpdates) {
    batchingStrategy.batchedUpdates(enqueueUpdate, component);
    return;
  }
  // 已开启事务流程：放到脏数组中（组件不更新 + this.state不变），等待更新
  dirtyComponents.push(component);

  if (component._updateBatchNumber == null) {
    component._updateBatchNumber = updateBatchNumber + 1;
  }
}

以上是setState的关键代码，batchingStrategy.batchedUpdates里面用到了事务机制。 setState 本身的方法调用是同步的，但是调用了setState不标志这react的 state 立即更新，这个更新是要根据当前环境执行上下文来判断的，如果处于batchedUpadte的情况下，那么state的不是当前立马更新的，而不处于batchedUpadte的情况下，那么他就有可能立马更新的。

所以在componentDidMount中调用setState并不会立即更新state，因为正处于一个更新流程中，isBatchingUpdates为true，所以只会放入dirtyComponents中等待稍后更新。

# 合成事件中调用setState

dispatchEvent: function (topLevelType, nativeEvent) {
    // disable了则直接不回调相关方法
    if (!ReactEventListener._enabled) {
      return;
    }

    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);
    try {
      // 在执行合成事件回调函数前，都先开启事务
      // 这样在执行回调函数里的setState时，都是放入脏数组时，往后更新
      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
    } finally {
      TopLevelCallbackBookKeeping.release(bookKeeping);
    }
}

ReactUpdates.batchedUpdates(callback, a, b, c, d, e) {
  ensureInjected();
  // 执行batchingStrategy.batchedUpdates意味着已开启事务流
  return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);
}

# 更新组件处理state

更新组件时，有对state进行处理

ReactCompositeComponent.updateComponent: function(
    transaction,
    prevParentElement, // pre VNode
    nextParentElement, // next VNode
    prevUnmaskedContext,
    nextUnmaskedContext,
  ) {
    var inst = this._instance;
    var prevProps = prevParentElement.props;
    var nextProps = nextParentElement.props;

    // componentWillReceiveProps 生命周期
    if (willReceive && inst.componentWillReceiveProps) {
        inst.componentWillReceiveProps(nextProps, nextContext);
    }

    // 对在pending队列中的state，进行merge state，拿到最新state值。
    var nextState = this._processPendingState(nextProps, nextContext);
    var shouldUpdate = true; // 是否要更新组件，默认是true

      if (inst.shouldComponentUpdate) {
          // 如果组件里有定义
          shouldUpdate = inst.shouldComponentUpdate(
            nextProps,
            nextState,
            nextContext,
          );
      } else {
        // 如果是纯组件（PureComponent），浅比较
        if (this._compositeType === CompositeTypes.PureClass) {
          shouldUpdate =
            !shallowEqual(prevProps, nextProps) ||
            !shallowEqual(inst.state, nextState);
        }
      }

    // 是否更新组件，这里常是用户优化的地方，控制什么时候React组件什么时候更新。
    // 不设置就是true，子组件都会VDOM比较一遍（意味着子组件没变时，也会去比较（多余的操作，所以可以在此优化性能），不过浪费的性能是VDOM比较，而不是会改动DOM）。
    if (shouldUpdate) {
      // _performComponentUpdate --> _updateRenderedComponent
      this._performComponentUpdate(
        nextParentElement,
        nextProps,
        nextState,
        nextContext,
        transaction,
        nextUnmaskedContext,
      );
    }
  },

// 合并state，拿到最新值
_processPendingState: function(props, context) {
    var inst = this._instance;
    var queue = this._pendingStateQueue;
    var replace = this._pendingReplaceState;
    this._pendingReplaceState = false;
    this._pendingStateQueue = null;

    // pending队列中只有0个或1个处理
    if (!queue) {
      return inst.state;
    }
    if (replace && queue.length === 1) {
      return queue[0];
    }

    // 多个处理
    var nextState = Object.assign({}, replace ? queue[0] : inst.state);
    for (var i = replace ? 1 : 0; i < queue.length; i++) {
      var partial = queue[i];
      Object.assign(
        nextState,
        typeof partial === 'function'
          ? partial.call(inst, nextState, props, context)
          : partial,
      );
    }

    return nextState;
  },

# 总结

如果在以下情况下执行setState方法：

  1. 生命周期里-此时已经开启了事务，当执行多个state时，所有都是在脏数组中，没有同步更新组件，意味着此时组件上的state没有更新。这也是为什么上面打印this.state.count会是0
  2. 合成事件回调函数里-下发事件时开启了事务，回调函数里执行setState都是放在脏数组中，同上
  3. setTimeout和DOM原生事件里，此时没有开启事务，直接同步更新组件 + 修改为最新的this.state

React 组件最佳实践 →