在本文中，我们将研究 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