1. React 18 中的自动批处理 Automatic Batching 如何工作？ 副本
输入“/”快速插入内容
1. React 18 中的自动批处理 Automatic Batching 如何工作？ 副本
1. React 18 中的自动批处理 Automatic Batching 如何工作？ 副本
用户9452用户94524月21日修改
深入解析 React 18：Automatic Batching 如何提升应用性能
在日常的 React 开发中，管理组件状态（State）和优化渲染性能是我们持续关注的核心议题。每一次 setState 调用都可能触发一次组件的重新渲染，如果短时间内存在大量状态更新，频繁的渲染会消耗宝贵的计算资源，影响用户体验。
为了应对这一挑战，React 18 引入了一个重要且影响深远的优化：**Automatic Batching（自动批处理）**。这个新特性旨在通过更智能的方式将多次状态更新合并为一次渲染，从而显著提升应用的性能。本文将深入探讨 Automatic Batching 的工作机制、它与旧版本的差异，以及如何在实践中充分利用它。
React 18 之前的状态更新：不一致的批处理
在理解 Automatic Batching 之前，我们首先需要回顾一下 React 17 及更早版本中的批处理行为。
所谓“批处理”（Batching），是指 React 将多个状态更新（setState）操作收集起来，然后将它们合并到一次重新渲染中来执行。这种机制能够有效避免不必要的重复渲染。
在旧版本中，React **仅在自身的事件处理器（Event Handlers）内部**进行批处理。这意味着，如果你在一个点击事件回调中连续调用多次 setState，React 会将它们合并，只在所有 setState 调用结束后进行一次渲染。
让我们看一个具体的例子：
代码块
// 在 React 17 中，事件处理器内部的更新会被批处理
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// React 只会在这里重新渲染一次
}
然而，这种批处理行为并不是全局一致的。当状态更新发生在异步操作中，例如 setTimeout、Promise 的回调或者原生的事件处理器里时，React 将无法进行批处理。每一次 setState 都会立即触发一次独立的渲染。
代码块
// 在 React 17 中，异步操作中的更新不会被批处理
setTimeout(() => {
setCount(c => c + 1); // 触发第一次渲染
setFlag(f => !f); // 触发第二次渲染
// 在这个场景下，React 会渲染两次，造成了性能浪费
}, 1000);
这种不一致性给开发者带来了心智负担，我们需要时刻留意状态更新所处的上下文，以避免无谓的性能损耗。
React 18 的革新：无处不在的自动批处理
React 18 彻底解决了上述不一致的问题。通过使用新的 Root API createRoot，Automatic Batching 成为了默认行为，并且其覆盖范围扩展到了几乎所有场景。
无论你的状态更新是发生在 React 事件处理器、setTimeout、Promise 回调、还是原生事件处理器中，React 18 都会自动将它们进行批处理。
我们再来看一下同样的 setTimeout 例子在 React 18 中的表现：
代码块
// 在 React 18 中，所有更新都会被自动批处理
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React 18 会等到两个状态更新都结束后，只进行一次重新渲染
}, 1000);
这个变化带来的好处是显而易见的：