batchUpdate · 前端筆記

[TOC] # batchUpdate * 在 react 的 event handler 內部同步的多次 setState 會被 batch 為一次更新 * 在一個異步的事件循環里面多次 setState，react 不會 batch * 可以使用**ReactDOM.unstable\_batchedUpdates**來強制 batch ## 解釋 [https://github.com/facebook/react/issues/10231](https://link.zhihu.com/?target=https%3A//github.com/facebook/react/issues/10231)這里有 Dan Abramov 對此的回答，大致來說就是雖然目前是這樣，但是未來 React 希望做到不管里你在哪里寫 setState，一個 tick 內的多次 setState 都給你合并掉。 ### 為什么 react 要這么設計？ [https://overreacted.io/react-as\-a-ui-runtime/#batching](https://link.zhihu.com/?target=https%3A//overreacted.io/react-as-a-ui-runtime/%23batching)這里有非常好的解釋，大致翻譯一下 ~~~text function Parent() { let [count, setCount] = useState(0); return ( <div onClick={() => setCount(count + 1)}> Parent clicked {count} times <Child /> </div> ); } function Child() { let [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Child clicked {count} times </button> ); } ~~~ 上面這樣的 demo，由于點擊事件冒泡的緣故，我們假設如果 react 不 batch 立即更新的話，那么點了 child button 之后的邏輯會是如下這樣 ~~~text *** 進入 react click 的事件函數 *** Child (onClick) 觸發點擊 - setState 修改 state - re-render Child 重新渲染 // 不必要的 Parent (onClick) 觸發點擊（冒泡） - setState 修改 state - re-render Parent 重新渲染 - re-render Child 重新渲染（渲染是自頂向下的，父親更新會導致兒子更新） *** 退出 react click 的事件函數 *** ~~~ 從上面可以看出，第一次子組件的重新渲染完全是浪費的。所以 React 設計成 setState 不立即觸發重新渲染，而是先執行完所有的 event handler，然后用一次重新渲染完成所有更新。 ### 為什么 setTimeout 定時器內的任務沒法被 batch 呢？可以先大致看一下**ReactDOM.unstable\_batchedUpdates**的代碼，可以看到有**isBatchingUpdates: boolean**這樣一個 flag * [https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOM.js#L801](https://link.zhihu.com/?target=https%3A//github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOM.js%23L801) * [https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberScheduler.js#L2481](https://link.zhihu.com/?target=https%3A//github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberScheduler.js%23L2481) 簡單來解釋，React 的更新是基于[Transaction](https://zhuanlan.zhihu.com/p/28532725)（事務）的，Transacation 就是給目標執行的函數包裹一下，加上前置和后置的 hook （有點類似 koa 的 middleware），在開始執行之前先執行 initialize hook，結束之后再執行 close hook，這樣搭配上 isBatchingUpdates 這樣的布爾標志位就可以實現一整個函數調用棧內的多次 setState 全部入 pending 隊列，結束后統一 apply 了。但是 setTimeout 這樣的方法執行是脫離了事務的，react 管控不到，所以就沒法 batch 了。 ### 為什么 Vue 沒有這個限制呢？是因為 vue 采用了 nexttick 的方式，利用 EventLoop，將一個同步事件循環過程中所有修改合并，它本質上屬于延遲的批量更新 * [https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js](https://link.zhihu.com/?target=https%3A//github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js) * [https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97](https://link.zhihu.com/?target=https%3A//cn.vuejs.org/v2/guide/reactivity.html%23%25E5%25BC%2582%25E6%25AD%25A5%25E6%259B%25B4%25E6%2596%25B0%25E9%2598%259F%25E5%2588%2597) ## batchedUpdates 的應用場景 react-easy-state 就使用了 ReactDOM.unstable\_batchedUpdates 來實現了框架層面的 batch 更新 API：[https://github.com/solkimicreb/](https://link.zhihu.com/?target=https%3A//github.com/solkimicreb/react-easy-state/blob/master/src/scheduler.js%23L9) # 參考資料 [深入 react 細節之 - batchUpdate](https://zhuanlan.zhihu.com/p/78516581)