关于setState的一些问题，求老师帮忙解答下

Question

是这样的 我知道setState是异步操作的，并且react有可能会合并几次setState，但是下面这段代码很想不明白

componentDidMount() {
    this.setState({
      value: this.state.value + 1,
    }, () => {
      console.log(this.state.value, '第一次回调执行完')
    });
    console.log(this.state.value);
    this.setState({
      value: this.state.value + 1,
    }, () => {
      console.log(this.state.value, '第二次回调执行完');
    });
    console.log(this.state.value);
    setTimeout(() => {
      console.log(this.state.value, '~~~~~~~~~~');
      this.setState({
        value: this.state.value + 1,
      }, () => {
        console.log(this.state.value, '第三次回调执行完')
      });
      console.log(this.state.value);
      this.setState({
        value: this.state.value + 1,
      }, () => {
        console.log(this.state.value, '第四次回调执行完')
      });
      console.log(this.state.value);
    }, 0)
  }
  
  /*
    0
    0
    1 "第一次回调执行完"
    1 "第二次回调执行完"
    1 "~~~~~~~~~~"
    2 "第三次回调执行完"
    2
    3 "第四次回调执行完"
    3  
  */

我是这么理解前面的，前面两次0是由于setState是异步操作，所以先执行的console，此时setState还没更新完，所以先打出了两次0，然后react合并了前两步setState操作，导致只执行了一次value+1，所以进入定时器开始时值是1，但是后面我就完全不懂了，为什么定时器中的setState的回调打印会先于直接console，而且这两步的setState为什么没有合并那

Answer 1

双越 2017-05-25 22:02:13

赞赞赞！

Answer 2

提问者 Friday__ 2017-05-25 12:55:48

麻烦老师了，我找到答案了，https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm

还有疑问的同学可以看这个文章，react对本身的类似onClick事件是异步的，但是类似setTimeout这种会同步执行，具体估计还是要看看react源码