React提高01 SetState的执行时机

执行时机

React的setState并不保证是同步执行的，但是也不一定就是异步执行的，准确的说是利用了队列来模拟异步执行，并没有用到任务的异步API。这篇文章分析了setState的执行机制，帮助我理解setState的执行时机有很大帮助。

先放下结论：

1. setState的实现并没有涉及到任何的异步API
2. 真正更新组件state的是flushBatchedUpdates函数，而setState不一定会调用这个函数，有可能多次setState调用一次这个函数
3. setState会不会立刻更新state取决于调用setState时是不是已经处于批量更新事务中。
4. 组件的生命周期函数和绑定的事件回调函数都是在批量更新事务中执行的。

延迟调用

在componentDidMount生命周期中执行setState：

export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: 0
    };
  }

  componentDidMount() {
    this.setState({ val: this.state.val