React 中 setState 并非都是異步

2019-03-28-12:03:于公司

setState通常大家都認(rèn)為是異步的,那就呵呵了。

在 React 中,如果是由 React 引發(fā)的事件處理(比如通過(guò) onClick 引發(fā)的事件處理),調(diào)用 setState 不會(huì)同步更新 this.state,除此之外的 setState 調(diào)用會(huì)同步執(zhí)行 this.state。
多個(gè)state會(huì)合成到一起進(jìn)行批量更新

所謂“除此之外”,通過(guò) addEventListener 直接添加的事件處理函數(shù),還有通過(guò) setTimeout/setInterval 產(chǎn)生的異步調(diào)用。

原因:

在 React 的 setState 函數(shù)實(shí)現(xiàn)中,會(huì)根據(jù)一個(gè)變量 isBatchingUpdates 判斷是直接更新 this.state 還是放到隊(duì)列中回頭再說(shuō)。

isBatchingUpdates 默認(rèn)是 false,也就表示 setState 會(huì)同步更新 this.state,但是,有一個(gè)函數(shù) batchedUpdates,這個(gè)函數(shù)會(huì)把 isBatchingUpdates 修改為true,而當(dāng) React 在調(diào)用事件處理函數(shù)之前就會(huì)調(diào)用這個(gè) batchedUpdates,造成的后果就是由 React 控制的事件處理過(guò)程 setState 不會(huì)同步更新 this.state。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容