react中放到定时器中的多个setState为什么不会合并再执行？

Question

描述

setState通过一个队列机制实现state更新，当执行setState时，会将需要更新的state 合并后放入状态队列，而不会立刻更新this.state，队列机制可以高效地批量更新 state。

实例：

constructor(){
    this.state={
        val:0,
    }
}
componentDidMount(){
    this.setState({val:this.state.val+1});
    console.log(this.state.val);
    
    this.setState({val:this.state.val+1});
    console.log(this.state.val);
    
    setTimeout(()=>{
    this.setState({val:this.state.val+1});
    console.log(this.state.val);
    
    this.setState({val:this.state.val+1});
    console.log(this.state.val);
    },0);
}

结果：0，0，2，3

问题描述

为什么不是0,0,2,2?

• 0,0,2能明白，前两次还在批量更新中，所以先合并setState,并且是在下次render才能得到结果。
• 当执行setTimeout时，第一个setState虽然这时批量更新为false，但是为什么这个setState没把组件状态变成批量更新状态？从而触发批量更新事务，使得定时器中的两次setState进行合并？

很是疑惑，感觉和讲解的setState机制矛盾，但是结果却是是分开执行的。

Answer 1

1. setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
2. setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
3. setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。