React剖析之状态管理

setState是同步更新还是异步更新？#

setState 并非真异步，只是看上去像异步。在源码中，通过 isBatchingUpdates 来判断
setState 是先存进 state 队列还是直接更新，如果值为 true 则执行异步操作，为 false 则直接更新。
那么什么情况下 isBatchingUpdates 会为 true 呢？在 React 可以控制的地方，就为 true，比如在 React 生命周期事件和合成事件中，都会走合并操作，延迟更新的策略。
但在 React 无法控制的地方，比如原生事件，具体就是在 addEventListener 、setTimeout、setInterval 等事件中，就只能同步更新。
一般认为，做异步设计是为了性能优化、减少渲染次数，React 团队还补充了两点。

1，保持内部一致性。如果将 state 改为同步更新，那尽管 state 的更新是同步的，但是 props不是。

2，启用并发更新，完成异步渲染。

Copy
class Test extends React.Component {
  state  = {
      count: 0
  };

    componentDidMount() {
    this.setState({count: this.state.count + 1}); // 异步
    console.log(this.state.count);

    this.setState({count: this.state.count + 1}); // 异步
    console.log(this.state.count);

    setTimeout(() => {   // 同步
      this.setState({count: this.state.count + 1});
      console.log(this.state.count);

      this.setState({count: this.state.count + 1});
      console.log(this.state.count);
    }, 0);
  }
 
  render() {
    return null;
  }
};

输出：0，0，2，3