React batchUpdate

React 的 batchUpdate（批处理更新）机制 是一种优化策略，旨在将多个状态更新合并为一次渲染，减少不必要的组件重新渲染次数，从而提高性能。

核心机制
1. 异步合并更新
  当在 同一执行上下文（如同一个事件处理函数、生命周期方法或 React 合成事件）中多次调用状态更新（如 setState、useState 的 setter 函数），React 不会立即触发渲染，而是将多个更新收集到一个队列中，最终合并为一次更新，统一计算新状态并渲染。
2. 更新队列
  React 内部维护一个更新队列。在触发更新的代码块中，所有状态变更会被暂存到队列，直到代码执行完毕，React 才会一次性处理队列中的所有更新，生成新的虚拟 DOM，并通过 Diff 算法高效更新真实 DOM。
触发批处理的场景
1. React 合成事件
  如 onClick、onChange 等事件处理函数中的多次状态更新会自动批处理。
```
const handleClick = () => {
  setCount(1) // 更新入队
  setName('Alice') // 更新入队
  // 最终合并为一次渲染
}
```
2. React 生命周期函数
  在 componentDidMount、componentDidUpdate 等生命周期方法中的更新会被批处理。
3. React 18+ 的自动批处理增强
  React 18 引入 createRoot 后，即使在异步操作（如 setTimeout、Promise、原生事件回调）中的更新也会自动批处理：
```
setTimeout(() => {
  setCount(1) // React 18 中自动批处理
  setName('Alice') // 合并为一次渲染
}, 1000)
```

绕过批处理的场景

React 17 及之前的异步代码
在 setTimeout、Promise 或原生事件回调中的更新默认不会批处理，每次 setState 触发一次渲染：
```
// React 17 中会触发两次渲染
setTimeout(() => {
  setCount(1) // 渲染一次
  setName('Alice') // 渲染第二次
}, 1000)
```

手动强制同步更新
使用 flushSync（React 18+）可强制立即更新，绕过批处理：

import { flushSync } from 'react-dom'
 
flushSync(() => {
  setCount(1) // 立即渲染
})
setName('Alice') // 再次渲染

设计目的
1. 性能优化
  避免频繁的 DOM 操作，减少浏览器重绘和回流，提升应用性能。
2. 状态一致性
  确保在同一个上下文中多次状态变更后，组件最终基于最新的状态值渲染，避免中间状态导致的 UI 不一致。

示例对比

自动批处理（React 18+）

const handleClick = () => {
  setCount((prev) => prev + 1) // 更新入队
  setCount((prev) => prev + 1) // 更新入队
  // 最终 count 增加 2，仅一次渲染
}

非批处理（React 17 异步代码）

setTimeout(() => {
  setCount((prev) => prev + 1) // 渲染一次
  setCount((prev) => prev + 1) // 再渲染一次
  // React 17 中触发两次渲染，count 仍为 2
}, 1000)

场景	React 17 及之前	React 18+（使用 `createRoot`）
合成事件/生命周期	自动批处理	自动批处理
异步操作	不批处理	自动批处理
原生事件回调	不批处理	自动批处理
React 的批处理机制通过合并更新减少了渲染次数，但在需要即时反馈的场景（如动画）中，可通过 `flushSync` 强制同步更新。

以我所主，为我所用