前端中高级面试爱问Fiber——看你是不是只停留在"React用虚拟DOM"的浅层。
Fiber之前(栈协调器):递归遍历整棵树、同步执行。树大了就长帧、掉帧。
Fiber:每个节点变成一个"fiber"(工作单元),带parent/child/sibling指针,像链表——能暂停能恢复。
两阶段:render/协调(可中断,构建WIP树)+ commit(同步,把DOM变更一次性刷下去)。
优先级lane:用户输入 > 动画 > 数据请求。高优先级更新可以抢占低优先级。
Suspense、并发渲染、自动批处理全靠它——这些特性都要求工作能被打断。
React 16之前是递归协调——一次长长的同步树遍历。大树就会卡主线程掉帧。Fiber把递归改成了对fiber链表节点的迭代,调度器能在任意节点暂停。render阶段可中断、构建WIP树;commit阶段同步、把DOM变更原子地刷下去。这套架构解锁了Suspense、Transition、并发渲染——没有可中断能力这些都做不到。面试时的关键一句:React要"聪明地"决定先渲染什么,Fiber就是实现这种聪明的发动机。
别把Fiber(架构)和Concurrent Mode(特性)混为一谈。
双缓冲——"current树 vs WIP树"——是核心心智模型。
即答侠会把Fiber和Suspense/Transition例子绑在一起讲——答得具体,不是照本宣科。
不一定——小树上多出的簿记开销反而稍慢。真正的收益在大树和交互密集的UI,暂停能力值钱。
React 18才真正打开了Fiber从16就在铺路的并发特性。Fiber是"引擎",18的API是"车"。