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

setState由react 引发的事件处理，是异步（合并）更新，除此以外的是同步的。

所以第一次和第二次是异步（合并）更新，这里取到的this.state.val=0,所以两次都是赋值为1（只执行一次）。前两次console.log()出来的结果都是0。setTimeout中，setState是同步的，所以第三次console出来是2，第四次conosle出来是3。

为什么setState由react 引发的事件处理是异步（合并）更新，因为react引发事件会将isBatchingUpdates设置为true.而setState根据该变量判断是放入队列中还是回头再说。