在本文中，我們將研究 ReactDOM.unstable_batchedUpdates 在測試案例中的使用，特別是在 Zustand（React 的流行狀態管理庫）中。我們還將分解測試並解釋批次更新如何透過最小化不必要的重新渲染來增強 React 的效能。

理解測試案例

這是我們將要檢查的測試案例：

編寫此測試案例是為了驗證在將 Zustand 與 React 渲染系統一起使用時是否可以套用批次更新。

分解測試案例

1。 Zustand 商店設定： 第一步涉及使用建立功能建立 Zustand 商店：

const useBoundStore = create(
  (set) => ({   
  count: 0,   
  inc: () => set((state) => ({ count: state.count   1 })), }))

在這裡，儲存維護一個簡單的狀態，其中 count 屬性初始化為 0，並有一個 inc 函數來遞增計數。 set函數是Zustand更新狀態的方式，類似React中的setState。

2. Counter 元件： Counter 元件使用 useBoundStore 來擷取目前計數和 inc 函數：

const { count, inc } = useBoundStore()

此元件訂閱商店的狀態，對計數的任何變更都會導致其使用新值重新渲染。

3.使用 ReactDOM.unstable_batchedUpdates 提高效能： 在 useEffect 鉤子內部，inc 函式在 ReactDOM.unstable_batchedUpdates 區塊中被呼叫兩次：

useEffect(() => {   
  ReactDOM.unstable_batchedUpdates(() => {     
    inc()     
    inc()   
  }) 
}, [inc])

這就是奇蹟發生的地方。通常，每次呼叫 inc() 都會觸發單獨的更新，導致兩次渲染。然而，透過將這些呼叫包裝在unstable_batchedUpdates中，React能夠在一次更新中一起處理它們，從而只產生一次渲染。這透過減少渲染數量來優化效能，這在效能關鍵型應用程式中特別有用。

4。渲染元件並斷言結果 最後渲染元件，測試等待計數達到 2：

const { findByText } = render(
       
    >, 
)  

await findByText('count: 2')

此斷言確保在兩次增量後，計數正確更新並呈現為「count：2」。

什麼是 ReactDOM.unstable_batchedUpdates？

ReactDOM.unstable_batchedUpdates 是 React 提供的一種方法，允許在單一渲染週期中處理多個狀態更新。預設情況下，React 批次更新在事件處理程序（例如單擊事件）內觸發，這表示如果您更新多個狀態以響應用戶交互，React 將僅渲染組件一次。但是，在事件處理程序之外（例如在 setTimeout 或 useEffect 內），更新不會自動批次處理。

但在React 18之後這已經改變了。以下是從react.dev中挑選的螢幕截圖

請記住，文件顯示逾時、承諾、本機事件處理程序或任何其他事件內部的更新將以與 React 事件內部的更新相同的方式進行批次處理。但在 Zustand 的測試案例中，批次更新是在 useEffect` 內部應用的。這就是unstable_batchedUpdates 發揮作用的地方。它迫使 React 將多個狀態更新分組到單一渲染中，即使在事件驅動的上下文之外也是如此，從而最大限度地減少重新渲染並提高效能。

例子：

沒有unstable_batchedUpdates：

inc()  // triggers one render
inc()  // triggers another render

使用unstable_batchedUpdates：

ReactDOM.unstable_batchedUpdates(() => {
  inc()  // triggers only one render for both updates
  inc()
})

該方法被標記為“不穩定”，因為它不是 React 官方公共 API 的一部分，但它仍然在社群中廣泛用於效能最佳化。未來它可能會變得更加穩定或集成為 React 新的並發渲染功能的一部分。

有趣的事實：Zustand 的 4.5.5 版本使用版本 — 19.0.0-rc.0

為什麼在 Zustand 中使用 ReactDOM.unstable_batchedUpdates？

Zustand 是一個輕量級狀態管理函式庫，可與 React 的元件生命週期搭配使用。儘管 Zustand 可以有效地處理狀態更新，但 React 的反應系統將在每次狀態變更時觸發渲染。在短時間內發生多次狀態變化的場景下，使用ReactDOM.unstable_batchedUpdates可以防止多次重新渲染並大量更新，從而提供更流暢、更有效率的使用者體驗。

在提供的測試案例中，在批次更新中呼叫 inc 兩次可確保計數僅更新一次，從而比單獨運行每個更新更有效率。

關於我們：

在 Think Throo，我們的使命是教授開源專案中使用的高階程式碼庫架構概念。

透過在 Next.js/React 中練習高階架構概念，提升您的程式設計技能，學習最佳實踐並建立生產級專案。

我們是開源的 — https://github.com/thinkthroo/thinkthroo （請給我們一顆星！）

透過我們基於程式碼庫架構的高階課程來提升您的團隊技能。請透過 [email protected] 與我們聯繫以了解更多資訊！

參考：

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L175C7-L175C39

2. https://dev.to/devmoustafa97/do-you-know-unstablebatchedupdates-in-react-enforce-batching-state-update-5cn2

3. https://dev.to/jackbuchananconroy/react-18-what-s-changed-automatic-batching-13ec

4. https://react.dev/blog/2022/03/08/react-18-upgrade-guide#automatic-batching

5. https://github.com/pmndrs/zustand/blob/v4.5.5/package.json#L246C4-L247C32