React 中的模式

React 的协调器是低级模式组合的典范。前五个模式全部出现在同一个渲染周期中。

渲染周期模式

模式	React 中的位置	作用
位掩码	ReactFiberFlags.js	Fiber 节点上的副作用标志
双缓冲	Fiber current / alternate	协调过程中的原子树切换
协作调度	workLoopConcurrent	每 5ms 让出以保持 UI 响应
最小堆	SchedulerMinHeap.js	调度任务的优先队列
差异/补丁	ReactChildFiber.js	协调新旧子节点列表

模式如何组合：一次渲染周期

当你调用 setState 时，五个模式依次触发：

setState()▼

1

最小堆

调度器将带有优先级（lanes）的更新任务插入堆中。堆确保最高优先级的更新先执行。

2

协作式调度

workLoopConcurrent 逐个处理 fiber，每 5ms 检查 shouldYield()。若浏览器需要线程，React 暂停并稍后恢复。

3

差异/补丁

对每个 fiber，reconcileChild 比较新旧 children 列表，找出最小 DOM 操作集。

4

位掩码

每个 diff 过的 fiber 设置副作用标志：Placement|Update|Deletion。标志通过 OR 运算向上冒泡。

5

双缓冲

整个渲染在 workInProgress 树上构建。commit 时 React 原子交换 current ↔ workInProgress。旧树变为下一个 workInProgress。

▼DOM 更新（commit 阶段）

核心洞察：这些模式并非独立的功能——它们形成了一条流水线。 最小堆决定渲染什么，协作调度决定何时渲染，Diff/Patch 决定什么发生了变化，位掩码编码如何变化，双缓冲确保切换是原子的。

参见模式如何协作了解完整的交互式组合图。

React 中的更多模式

模式	React 中的位置	作用
批处理	unstable_batchedUpdates	多次 setState 调用合并为一次重渲染
脏标记	ReactFiberFlags.js	Fiber 标志（Placement、Update、Deletion）标记需要处理的子树
观察者	useEffect cleanup 模式	挂载时订阅，清理时取消订阅——解耦的状态观察

延伸阅读

• React 源码 (GitHub)
• React Fiber 架构