前端面试题

React Fiber架构:16版本为什么重写协调器

React Fiber是什么?为什么要重写协调器?

为什么面试官会问这道题

前端中高级面试爱问Fiber——看你是不是只停留在"React用虚拟DOM"的浅层。

如何回答

  1. 1

    Fiber之前(栈协调器):递归遍历整棵树、同步执行。树大了就长帧、掉帧。

  2. 2

    Fiber:每个节点变成一个"fiber"(工作单元),带parent/child/sibling指针,像链表——能暂停能恢复。

  3. 3

    两阶段:render/协调(可中断,构建WIP树)+ commit(同步,把DOM变更一次性刷下去)。

  4. 4

    优先级lane:用户输入 > 动画 > 数据请求。高优先级更新可以抢占低优先级。

  5. 5

    Suspense、并发渲染、自动批处理全靠它——这些特性都要求工作能被打断。

参考回答示例

React 16之前是递归协调——一次长长的同步树遍历。大树就会卡主线程掉帧。Fiber把递归改成了对fiber链表节点的迭代,调度器能在任意节点暂停。render阶段可中断、构建WIP树;commit阶段同步、把DOM变更原子地刷下去。这套架构解锁了Suspense、Transition、并发渲染——没有可中断能力这些都做不到。面试时的关键一句:React要"聪明地"决定先渲染什么,Fiber就是实现这种聪明的发动机。

实用技巧

  • 别把Fiber(架构)和Concurrent Mode(特性)混为一谈。

  • 双缓冲——"current树 vs WIP树"——是核心心智模型。

  • 即答侠会把Fiber和Suspense/Transition例子绑在一起讲——答得具体,不是照本宣科。

常见问题

Fiber一定比老协调器快吗?

不一定——小树上多出的簿记开销反而稍慢。真正的收益在大树和交互密集的UI,暂停能力值钱。

和React 18什么关系?

React 18才真正打开了Fiber从16就在铺路的并发特性。Fiber是"引擎",18的API是"车"。

面试时担心忘词?即答侠实时助你

即答侠 AI 实时监听面试对话,自动识别问题并即时生成回答建议——无感辅助,让你从容应对每一道题。

免费试用即答侠