setState的同步与异步更新值

• 首先这里所说的同步异步， 并不是真正的同步异步， 它还是同步执行的。这里的异步指的是多个state会合成到一起进行批量更新。
• 在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理）或者生命周期中（比如componentDidMount），调用setState不会同步更新（立即更新）this.state，除此之外的setState调用会同步执行（立即更新）this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。
• 在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

看一个的列子

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

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

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

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

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

    render() {
        return null;
    }
}

输出： 0 0 2 3

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

2. 两次 setState 时，获取到 this.state.val 都是 0，所以执行时都是将 0 设置成 1，在 react 内部会被合并掉，只执行一次。设置完成后 state.val 值为 1。

3. setTimeout 中的代码，触发时 isBatchingUpdates 为 false，所以能够直接进行更新，所以连着输出 2，3。