深入 React 渲染模型：Fiber、并发与 useTransition

理解 React 的渲染模型，是写出高性能组件的关键。本文带你从 Fiber 架构出发，看清「可中断渲染」与并发特性的本质。

从栈调和到 Fiber

早期 React 用递归的「栈调和」遍历组件树，一旦开始渲染就无法中断，长任务会阻塞主线程，导致掉帧。

Fiber 把渲染工作拆成一个个可中断的单元，并用链表结构组织，使得 React 可以在多个工作单元之间让出主线程，处理更高优先级的更新（如用户输入）。

两阶段渲染

Fiber 引入了渲染的两个阶段：

1. Render 阶段：构建 Fiber 树，计算差异，可中断；
2. Commit 阶段：把差异一次性应用到 DOM，不可中断。

「可中断」的能力，是后面所有并发特性的地基。

并发与调度

React 通过调度器（Scheduler）为不同更新分配优先级：

• 用户输入、动画 → 高优先级，立即处理；
• 数据请求后的渲染 → 可被中断，稍后继续。

这带来一个重要的认知转变：一次 setState 触发的渲染，未必会立即、完整地执行。

useTransition：标记低优先级更新

useTransition 让你把某次更新标记为「过渡」，React 会降低它的优先级：

const [isPending, startTransition] = useTransition();
startTransition(() => {
  setSearchQuery(keyword); // 低优先级，可被输入打断
});

配合 useDeferredValue，可以显著改善搜索、筛选这类「输入即重算」场景的卡顿。

结语

Fiber 与并发的本质，是 React 在「响应速度」与「计算完整性」之间做的精细权衡。理解它，你就能理解为什么某些优化手法有效，而另一些只是心理安慰。