描述

setState通過一個隊列機(jī)制實現(xiàn)state更新，當(dāng)執(zhí)行setState時，會將需要更新的state 合并后放入狀態(tài)隊列，而不會立刻更新this.state，隊列機(jī)制可以高效地批量更新 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);
}

結(jié)果：0，0，2，3

問題描述

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

• 0,0,2能明白，前兩次還在批量更新中，所以先合并setState,并且是在下次render才能得到結(jié)果。
• 當(dāng)執(zhí)行setTimeout時，第一個setState雖然這時批量更新為false，但是為什么這個setState沒把組件狀態(tài)變成批量更新狀態(tài)？從而觸發(fā)批量更新事務(wù)，使得定時器中的兩次setState進(jìn)行合并？

很是疑惑，感覺和講解的setState機(jī)制矛盾，但是結(jié)果卻是是分開執(zhí)行的。