React 多个 setState 怎么合并成一次渲染？

Question

仓乃文 · Accepted Answer

React 18 起所有更新自动批量处理，多个 setState 会合并成一次渲染。但在 React 17 及以下，异步回调（setTimeout、Promise）中的 setState 不会批量处理，需要用 unstable_batchedUpdates 手动合并。

React 18 自动批量更新：
```javascript
function handleClick() {
  setCount(1);    // 不会立即渲染
  setName("Tom"); // 不会立即渲染
  setAge(20);    // 不会立即渲染
  // 三个 setState 合并成一次渲染
}
```

React 18 异步回调也自动批量：
```javascript
fetch("/api").then(() => {
  setCount(1);    // React 18：合并渲染
  setName("Tom"); // React 17：触发两次渲染
});
```

React 17 手动批量：
```javascript
import { unstable_batchedUpdates } from "react-dom";

fetch("/api").then(() => {
  unstable_batchedUpdates(() => {
    setCount(1);
    setName("Tom");  // 合并成一次渲染
  });
});
```

补充说明：
- React 18 的自动批量适用于所有场景：事件处理、Promise、setTimeout、原生事件
- flushSync 可以强制同步渲染：flushSync(() => setCount(1))，但会牺牲性能
- 同一事件中多次函数式更新 setCount(prev => prev + 1) 会依次执行，不是覆盖
- 批量更新是 React 性能优化的基础机制，减少不必要的渲染次数