React 18 新特性

18 的核心不是新 API，是把渲染变成可中断的并发任务；useTransition 只是把这个能力交到你手里的开关。

并发渲染（Concurrent Rendering）

16/17 的渲染是同步递归：一旦开始 render，就必须一路走完才能回到浏览器，任务长了就掉帧。18 引入 Fiber 的双缓冲与时间切片后，render 阶段可以被更高优先级的任务打断——打断的是 render，commit 仍然是一次性同步完成的，因为 DOM 改到一半回滚代价太大。

维度	React 17	React 18
渲染方式	同步递归，不可中断	可中断的并发渲染
更新优先级	全部同级	按 lane 分优先级（用户输入 > 过渡更新）
批量更新范围	仅 React 事件回调内	所有场景（含 setTimeout、Promise、原生事件）
水合	同步，阻塞	可选择性地随时中断（配合 Suspense）

并发特性是可选的：不用 createRoot、不用新 API，应用行为与 17 基本一致。

Render API：createRoot 与 hydrateRoot

ReactDOM.render 在 18 中被标记为 legacy，调用会打印警告；并发特性只在 createRoot 下可用。

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

const root = createRoot(document.getElementById('root'));
root.render(<App />);
// 卸载用 root.unmount()，而不是 ReactDOM.unmountComponentAtNode

SSR 场景对应 hydrateRoot：

import { hydrateRoot } from 'react-dom/client';

hydrateRoot(document.getElementById('root'), <App />);

注意：createRoot 下 StrictMode 会在开发环境对组件做两次挂载（mount → unmount → mount），用来暴露副作用没清理干净的问题。很多人以为这是 bug，实际上它是在提前暴露你在 useEffect 里漏了 cleanup。

自动批处理（Automatic Batching）

17 只在 React 事件处理器里批处理 setState，18 扩展到所有场景：

// React 17：setTimeout 里两次 setState 触发两次渲染
// React 18：同样只渲染一次
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 0);

需要强制同步刷新时用 flushSync，但它会破坏批处理、引发额外布局计算，只在「拿到 DOM 立刻测量」这类场景使用：

import { flushSync } from 'react-dom';

flushSync(() => setCount(c => c + 1));
// 此时 DOM 已更新，可以 measure

并发 Hooks

useTransition：把一次更新标记为「过渡」，让用户输入优先。

const [isPending, startTransition] = useTransition();
const [keyword, setKeyword] = useState('');

function onChange(e) {
  setKeyword(e.target.value);          // 紧急：输入框必须立刻响应
  startTransition(() => {
    setList(filterLargeList(e.target.value)); // 非紧急：可以被打断
  });
}