亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

react中放到定時器中的多個setState為什么不會合并再執行?

react中放到定時器中的多個setState為什么不會合并再執行?

繁星點點滴滴 2018-08-03 19:13:28
描述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機制矛盾,但是結果卻是是分開執行的。
查看完整描述

1 回答

?
慕蓋茨4494581

TA貢獻1850條經驗 獲得超11個贊

  1. setState 只在合成事件和鉤子函數中是“異步”的,在原生事件和 setTimeout 中都是同步的。

  2. setState的“異步”并不是說內部由異步代碼實現,其實本身執行的過程和代碼都是同步的,只是合成事件和鉤子函數的調用順序在更新之前,導致在合成事件和鉤子函數中沒法立馬拿到更新后的值,形式了所謂的“異步”,當然可以通過第二個參數 setState(partialState, callback) 中的callback拿到更新后的結果。

  3. setState 的批量更新優化也是建立在“異步”(合成事件、鉤子函數)之上的,在原生事件和setTimeout 中不會批量更新,在“異步”中如果對同一個值進行多次 setState , setState 的批量更新策略會對其進行覆蓋,取最后一次的執行,如果是同時 setState 多個不同的值,在更新時會對其進行合并批量更新。


查看完整回答
1 反對 回復 2018-08-05
  • 1 回答
  • 0 關注
  • 2676 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號