Skip to main content

Fiber 与调度直觉

面试不要求背源码,但要能说清:为什么需要 Fiber、和 Stack Reconciler 差在哪、调度在解决什么问题

旧模型的问题:递归一气呵成

早期协调可以粗理解为:从根递归对比整棵树,一旦开始就不能停

主线程还要处理:输入、动画、响应点击。若协调太久 → 掉帧、输入卡顿。

Fiber:把工作拆成可中断的单元

Fiber 既是 数据结构(每个组件对应一个 Fiber 节点,串成树/链表),也是 工作模型

  • 更新被拆成一个个小工作单元
  • 做一会儿可以 暂停,把主线程还给浏览器
  • 有空再 继续;更高优任务来了可以 插队 / 丢弃过期工作

可以记成:

Stack Reconciler ≈ 递归,难中断
Fiber Reconciler ≈ 链表上的循环,可停下、可恢复

两阶段心智(够面试用)

  1. Render / Reconciliation(可中断)
    算「下次 UI 应该长什么样」(跑组件函数、diff),尽量不碰真实 DOM。
  2. Commit(同步、不可随便打断)
    把变更刷到 DOM,跑 layout effect 等。要短,否则用户会看到中间态或卡顿。

所以:重计算尽量想办法不堵在 commit;紧急 UI(输入回显)应优先于重列表过滤。

优先级直觉(不必背枚举名)

大致分层:

更紧急例子
用户输入、点击反馈输入框 value 立刻跟上
动画、过渡保持帧率
可延迟的根据输入过滤万行列表、刷新次要面板

Concurrent 特性(useTransition 等)就是把「可延迟更新」标出来,让调度器 先保交互。细节见并发特性

双缓冲(简单提一句)

React 会维护工作中的树与当前展示的树;render 阶段在「内存里」准备,commit 时切换生效。好处是:可丢弃未完成的渲染结果,而不把半成品 DOM 交给用户。

和 Hooks 的关系

Hooks 状态挂在 当前 Fiber 的 hook 链表 上,所以:

  • 调用顺序必须稳定(见Hooks 核心
  • 每次该 Fiber 被重新处理,就按序复用/更新这些 hook 节点

面试里别怎么答

  • 不要假装背过 lanes 每一位含义(除非岗位偏框架)
  • 不要说「Fiber 就是 Virtual DOM」——VDOM 是概念;Fiber 是实现更新调度与单元化的架构
  • 不要把「可中断」理解成「commit DOM 也可以随便中断」

面试速答模板

旧版协调递归执行,长时间占用主线程会导致卡顿。Fiber 把更新拆成可中断的工作单元,在空闲时分片执行,并按优先级调度:输入等紧急更新优先,可延迟的更新可以打断或延后。流程上大致分可中断的 render 阶段和同步的 commit 阶段。


上一篇:渲染机制与性能优化 · 下一篇:并发特性