描述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機制矛盾,但是結果卻是是分開執行的。
react中放到定時器中的多個setState為什么不會合并再執行?
繁星點點滴滴
2018-08-03 19:13:28