React Fiber 是什么？它解决了什么问题？

简化版

Fiber 是 React 16 引入的新协调架构。它把原来递归同步渲染改造成可拆分的工作单元，使 React 能暂停、恢复、优先级调度和丢弃任务，为并发渲染打基础。

详细版

旧架构中，React 一旦开始递归构建组件树，就很难中断。如果组件树很大，主线程会被长时间占用，用户输入和动画就会卡顿。

Fiber 的核心变化：

每个组件对应一个 Fiber 节点。
Fiber 节点通过 child、sibling、return 组织成链表结构。
渲染任务可以拆成一个个 Fiber 单元。
Scheduler 可以按优先级调度任务。

Fiber 不是为了让单次计算更少，而是为了让 React 更好地安排什么时候做哪些工作。

完整版教学

一、旧递归协调的问题

React 早期协调过程接近递归调用：从根组件一路递归到叶子节点。这个过程一旦开始，很难把控制权还给浏览器。

如果组件树很大，浏览器无法及时处理点击、输入、滚动，页面就会出现掉帧。这不是 DOM 慢的问题，而是 JS 长任务占住了主线程。

二、Fiber 把递归变成可遍历链表

Fiber 节点保存了父、子、兄弟指针，使 React 可以用循环方式遍历树。每处理完一个 Fiber 工作单元，就有机会判断是否应该暂停，把控制权还给浏览器。

这让 React 的渲染工作从“必须一次做完”变成“可以分段完成”。

三、优先级调度

不是所有更新都同样紧急。输入框输入、鼠标点击比后台数据刷新更紧急。Fiber 架构配合调度器，让 React 能给不同更新分配优先级。

高优先级任务可以打断低优先级任务。低优先级 render 甚至可能被丢弃，然后用新数据重新开始。

四、面试追问与工程落地

常见追问是“Fiber 会不会让渲染变快”。准确说，Fiber 不一定减少总工作量，它提升的是可调度性和响应性。原来 100ms 连续阻塞，现在可能拆成多个小片段，中间让浏览器处理用户事件。

还会问“Commit 阶段能不能中断”。不能。因为真实 DOM 一旦改到一半就暂停，用户会看到不一致的 UI。Fiber 的可中断主要发生在 Render 阶段。

工程中理解 Fiber 可以帮助你理解 StrictMode 下某些逻辑为什么会执行两次、为什么 render 阶段不能做副作用、为什么并发特性要求组件渲染逻辑保持纯净。

五、Fiber 节点如何保存可恢复的工作

Fiber 是普通 JavaScript 对象，child 指向第一个子节点、sibling 串起同级节点、return 指回父节点。这样的显式链表把原本依赖调用栈的递归过程变成可由 React 自己推进的遍历，暂停时只需保留“当前处理到哪个 Fiber”。

Parent Fiber
  child ↓
Child A ──sibling──> Child B
  return ↖             ↗ return

同一位置通常有 current 与 work-in-progress 两棵 Fiber 通过 alternate 关联：current 对应屏幕已提交版本，work-in-progress 承载本轮计算。Render 成功后提交指针切换；若低优先级工作被放弃，未提交树可以丢弃，用户不会看到半成品。

字段/概念	作用	面试边界
`type` + `key`	判断身份与复用	变化可能重置子树状态
`child/sibling/return`	可迭代地表达树	属于内部结构，不应在业务代码依赖
`alternate`	连接 current 与工作树	支持双缓冲式复用
lanes/优先级	标记哪些更新待处理	具体位定义属于实现细节

六、可中断改善响应性但不减少总工作

假设一次 Render 需要处理 10000 个工作单元，连续执行 20 ms 会超过约 16.7 ms 的 60fps 帧预算。若并发调度把低优先级工作分成若干不超过 5 ms 的片段，浏览器中间有机会处理输入；总计算可能仍是 20 ms 甚至略高，但最长阻塞被缩短。

紧急输入更新：高优先级 lane ──先处理──> 尽快 Commit
列表筛选更新：transition lane ──可暂停──> 空闲时继续
期间再输入：低优先级工作可能基于新条件重算

lane 可以看成更新优先级与批次的内部标记，React 能合并相关工作并选择下一组待处理更新。面试无需背具体二进制位，只需说清“优先级属于更新，Fiber 保存子树尚待处理的工作”。

优先级调度也不能打断任意 JavaScript 长循环；组件内一次同步执行的重计算仍需拆分、缓存或移出主线程。

可中断性主要属于并发 Render，Commit 中的 DOM 变更和 layout effect 需要保持一致性，仍会同步完成。高优先级更新可以让低优先级渲染重启，所以 render 函数、state updater 和 memo 计算都必须保持纯净，不能把“执行过”误认为“一定会提交”。

Fiber 的价值指标是可调度性和交互响应，而不是承诺每次更新更少计算；Render 可重做，Commit 才真正生效。

七、常见误区与追问

误区：Fiber 是一种新的虚拟 DOM 数据格式而已。 它更核心的意义是把协调工作表达成可保存、可恢复、可分优先级的单元。
误区：Fiber 会自动减少每次渲染的总计算量。 分片和调度可能增加管理开销，收益主要是降低长任务阻塞。
误区：React 的所有阶段都能随时暂停。 Render 可被中断或放弃，Commit 必须一致地完成宿主变更。
追问：current 和 work-in-progress 为什么要两棵树？ 屏幕继续对应稳定的 current，React 可以在另一棵树上计算，成功后再原子式切换结果。
追问：高优先级更新怎样影响低优先级工作？ 调度器可先处理更紧急 lane，低优先级 Render 随后恢复或基于新状态重算。
追问：Fiber 为什么要求 render 纯净？ 未提交的 Render 可能重复或被丢弃，副作用若在其中执行就无法与提交结果一一对应。
追问：理解 Fiber 对业务优化有什么用？ 它帮助判断长任务、状态边界和 transition 优先级，但性能结论仍应由 Profiler 验证。

八、加强记忆

Fiber 的关键词是“可拆分、可中断、可调度”。它不是单纯优化速度，而是让 React 有能力把主线程时间切得更聪明。

current 保持已提交界面，work-in-progress 承载可重做计算，最后由不可中断的 Commit 落地。

简化版

详细版