setState 如何同步去跟新state？

好记性不如烂笔头

首先我们要知道React 中 setState 什么时候是同步的，什么时候是异步的？

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};

输出效果如下

输出： 0 0 2 3

说明

1、第一次和第二次都是在 react 自身生命周期内，触发时 isBatchingUpdates 为 true，所以并不会直接执行更新 state，而是加入了 dirtyComponents，所以打印时获取的都是更新前的状态 0。

2、由于setTimeout关系 ，两个setTimeout都是独立的且不同时的宏任务(task)  跟新state时 所以能够直接进行同步更新，所以连着输出 2，3。

记录一下以便复习

参考资料  https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7