在 React 发展过程中，批量更新机制经历了翻天覆地的变化特别是从 React 16 到 React 18 的演进。让开发者既得到了性能提高，也产生了一系列“到底什么时候会触发渲染”的疑惑。

一、什么是批量更新？

先看一个典型场景：在同一次点击事件中连续调用三次 setState。

const = useState;function handleClick {
setCount;setCount，setCount;说起来，}

很多人直觉认为最终 count 会变成 3。但 React 会把这三次更新合并，只触发一次 render，从而得到最终 count = 3。这样做可以显著减少不必要的重渲染。

二、React 16 & 17 的批量更新机制

只在 React 控制的事件中才会批量更新

例如这方面，

function App {
const = useState;const click = => {
setCount;setCount，setCount;}，return (
{count}
);}

React 在事件回调结束后统一处理所有 queued 更新，只触发一次 render。

更新流程概览

1. 点击按钮 → 收集所有状态变更 → 放入 update 队列；怎么说呢，
2. 事件完成 → 合并 update 并计算新 state；
3. 执行一次 render 与 commit。

三、哪些场景不是批量更新？

• setTimeout / Promise / async/await / 原生 DOM 事件回调： 这些函数中的 state 更新不会被 React 自动聚合，每个调用都会导致单独渲染。

说到示例，setTimeout 内部多次更新导致双重渲染

setTimeout => {
setCount;setCount，});// 两次 render

Promise 中多次更新一样导致双重渲染：

Promise.resolve.n => {
setCount;老实说，setCount;})，// 两次 render

原生事件监听器内也不会自动批量：

document.addEventListener => {
setCount;setCount，});// 两次 render

场景	是否批量更新
React event handler Lifecycle methods setTimeout	✔️ ✅ ❌ ❌ ❌ ❌ ❌ ❌
Promise async/await 原生 DOM events	❌ ❌ ❌

四、React 18 引入 Automatic Batching：几乎所有场景都支持批量！

A key change in React 18 is automatic batching feature that works whenever you call createRoot. From now on,even asynchronous callbacks are batched.

• Batched updates in ,,or any native event.
• Batched updates inside DateTimeouts,Promises。async/await.
• Batched updates inside your own custom callbacks that run after event loop tick.
• You still need to wrap legacy root rendering with .
• This change removes a common source of confusion for developers transitioning from older releases.

Batched example in React 18

setTimeout => {
setCount;setCount，});// single render

Promise.resolve.n =>{
setCount;按理说，setCount;})，// single render

async function test {
await fetch;setCount，console.log;// still old value until flush
}
test;其实，// single render after promise resolves
}

document.addEventListener=>{
console.log;const =useState
Promise.resolve.n=>{
console.log
console.log
} )
});// single render because of automatic batching
} 

// 注意：这里仍然需要将代码包裹在 createRoot 中才能生效。}

// 当我们使用 createRoot 渲染时它会自动开启批处理功能。

// 举例：如果你在一个普通的 createElement 渲染树里使用了 Promise 或者 async/await。这些异步回调里的状态更改不会被自动聚合，而是在每个异步块结束后立即触发一次重新渲染。

// 所以当你迁移到新版时需要确认你的根节点是否使用了 createRoot，还有是否把旧版根节点换成了新的 Concurrent 模式来获得最佳性能。

// 如果你还有疑问。可以尝试下面这个简单的小实验： // 把下面两段代码分别放到 createRoot 和 legacyRoot 中运行，接下来观察浏览器控制台打印出的渲染次数。// js

// import {createRoot} from 'react-dom/client';// import {render} from 'react-dom';

// const container = document.getElementById;

// function App{ // const =useState;// function handle{ // for{ // if{ // Promise.resolve.n=>{setCnt}) // } // } // }return}

// # 使用 legacy root render;

const root=createRoot;root.render，

js

接下来观察控制台中打印出来的 “render” 次数，你就能直观看到不同模式下 batch 的差异。

上述代码片段仅作演示之用，请根据自己的项目结构进行适配。

• 优点减少 DOM 操作，提高 UI 响应速度；老实说，降低 CPU 占用率；
• 缺点若你期望立刻看到结果，就需要理解何时是“同步”还是“异步”。

---

二、从 React 16 开始

A. 正常情况——React‑Controlled Events

js function App{ const =useState const handler==>{ /* 三次计数 */ for{ if{ Promise.resolve.n=>{ /* ⚡️ 每个计数都写进队列 */ /* ✅ 自动聚合后只执行一次 re‑render */ cnt+=i;}) } } } return }

• 当我们点击按钮时所有 cnt+=i 都会被收集到 Update Queue；
• 点击结束后框架统一处理该队列。一起重新计算并生成新的虚拟 DOM，接下来才真正走 Commit 阶段。

---

B. 非 Batch 场景

场景	是否 Batch
setTimeout	❌
Promise.n	❌
原生 Event	❌
async/await	❌

💡 为什么上面这些场景不聚合呢？因为它们不是由 React 生命周期管理，而是由 JS 引擎自己调度执行。

---

三、React 18 的 Automatic Batching

从 React 18 开始。只要你使用 渲染树，就能实现以下效果：

• 所有以上非 batch 场景也都会被自动聚合；
• 同一帧内多处 state 改动，只触发一次真实 Render。

js import {createRoot} from 'react-dom/client';const root=createRoot);root.render，按理说，

✅ 现在即使是在异步回调里调用多次 setState也能像同步回调一样只产生一次 UI 更新！

---

四、同步 vs 异步 更新 – 常见误区

🔍 常见问题

• “我在事件处理器里直接读 state，却没有看到最新值。” — 状态尚未提交，
• “为什么我用 flushSync 能马上看到变化？” — 它强制立即执行 update 与 commit。

同步与异步区别简述

方法	描述
	批量 -> 单次 Render
flushSync=>{...})	强制即时 Render & Commit

---

五、实现手段

📦 使用 自动开启 Automatic Batching

🔄 强制同步刷新 – flushSync

js import {flushSync} from 'react-dom';flushSync =>{ dispatch);})，console.log;// 已经是最新值

⚙️ 优先级调度 – startTransition

js startTransition=>{ dispatch);})，

• 高优先级输入等操作保持流畅；
• 大列表或复杂运算则放低优先级，让 UI 不卡顿。

---

六、面试标准答案提炼

React 16

• 或生命周期方法 → 自动 batch；
• setTimeout。Promise,原生 DOM Event → 无 batch，仅各自单独 re-render；老实说，

• 所有上述场景均支持 Automatic Batching；
• 支持 Concurrent Rendering 与 startTransition；

状态更新本质说明

• State 的创建本身是同步，但实际 UI 更新是异步完成；
• 往往表现为“看似异步”。

---

---