React 18：并发特性、自动批处理与 startTransition

知识背景

React 18 引入 Concurrent（并发）渲染：框架可把更新分片、可中断、按优先级调度，以改善大数据列表、频繁输入等场景的可响应性。对业务代码最直观的变更是：默认自动批处理（更多场景下多次 setState 合并为一次渲染）、以及 startTransition / useDeferredValue 把更新标成「可延迟」。

---

知识详解与通俗解释

1. 自动批处理（Automatic Batching）

以往在 setTimeout、Promise 回调里多次 setState 可能触发多次渲染；React 18 在 createRoot 下会把这些也批掉（在多数情况下）。
仍可通过 flushSync 强制同步刷新（少用，多在第三方集成或测试）。

通俗说：以前只有「同一事件里」算一趟车；现在更多场合都拼车出发，减少无效绘制。

2. startTransition

import { startTransition } from 'react';

startTransition(() => {
  setHeavyList(filtered);
});

标记低优先级更新：紧急的输入 state 可先响应，重列表过滤稍后应用。适合搜索过滤、路由切换等大更新。

3. useDeferredValue

const deferredQuery = useDeferredValue(query);
// 用 deferredQuery 驱动重计算/重列表，query 保持输入即时

与 startTransition 常一起出现：一个偏命令式，一个偏「派生一个滞后值」。

4. Suspense 与数据（方向感）

React 18 强化了 Suspense 与流式 SSR等能力；具体数据获取模式以 Router / Relay / React Query 等栈为准。面试记住：并发不是多线程 JS，而是可中断的协调与调度。

---

总结

• createRoot 开启 React 18 客户端特性；注意与 ReactDOM.render legacy根的区别。
• 自动批处理减少渲染次数；startTransition / useDeferredValue 分离紧急与非紧急 UI。
• 并发能力要配合良好的状态拆分；不必处处 transition，先解决实测卡顿点。