在现代前端开发中，React 是当之无愧的主流框架之一。而当你深入 React 的底层机制时，Fiber 就是一个绕不开的核心概念。当面试官抛出“请介绍一下 Fiber”这个问题时，他/她其实是在考察你对 React 渲染机制、性能优化原理以及异步调度的理解深度。

本文将从 定义、结构、优势、渲染流程变化 四个维度，带你全面理解 React Fiber。

---

1. 什么是 Fiber？

Fiber 是 React 16 引入的一种全新的协调（Reconciliation）引擎，同时也是 React 内部用于表示组件树的一种数据结构。

简单来说：Fiber = 新的协调算法 + 基于链表的可中断任务模型。

在 Fiber 出现之前，React 的渲染是同步且不可中断的。一旦开始更新，就会一直执行到完成，期间无法响应用户交互或高优先级任务，容易造成页面卡顿。Fiber 的出现，正是为了解决这一性能瓶颈。

在 React 15 及之前，使用的是 Stack Reconciler（基于递归，同步执行）；
从 React 16 开始，替换为 Fiber Reconciler（基于 Fiber 架构，支持异步、可中断、优先级调度）；

---

2. Fiber 节点的数据结构

每个 React 元素在内部都会对应一个 Fiber 节点，它本质上是一个 JavaScript 对象，包含大量用于协调和调度的信息。关键属性包括：

• child：指向第一个子 Fiber 节点（构建父子关系）
• sibling：指向下一个兄弟 Fiber 节点（横向遍历）
• return：指向父 Fiber 节点（用于回溯）
• stateNode：
  • 类组件 → 指向组件实例
  • 函数组件 → 初次渲染为 null，后续可能保存 hooks 相关状态
• effectTag：标记该节点需要执行的副作用（如 Placement 插入、Update 更新、Deletion 删除等）

这种结构让 Fiber 树本质上是一棵用链表连接的树，既支持深度优先遍历，又便于中断和恢复。

💡 为什么不用递归？因为递归一旦开始就无法暂停。而 Fiber 使用“循环 + 指针”的方式模拟树遍历，实现可中断的协调过程。

---

3. Fiber 的核心优势

任务切片与可中断性（Time Slicing）

Fiber 将整个渲染工作拆分成多个小单元（每个 Fiber 节点对应一个工作单元）。React 在执行这些单元时，会定期检查是否已占用过多主线程时间（通常以 5ms 为阈值）。如果超时，就主动让出控制权给浏览器，处理用户输入、动画等高优先级任务，稍后再继续。

这极大提升了应用的响应性和流畅度。

优先级调度（Priority-based Scheduling）

Fiber 引入了任务优先级机制。例如：

• 用户点击、输入 → 高优先级
• 数据请求完成后的更新 → 中优先级
• 预加载、后台计算 → 低优先级

高优先级任务可以打断正在进行的低优先级任务，确保关键交互不被阻塞。这种机制是实现“并发模式（Concurrent Mode）”的基础。

---

4. 渲染流程的变化：双阶段架构

Fiber 将 React 的渲染过程明确划分为两个阶段：

协调阶段（Reconciliation Phase）

• 可中断、可暂停
• 构建新的 Fiber 树（workInProgress tree）
• 与旧 Fiber 树对比（diff），标记需要变更的节点（通过 effectTag）
• 此阶段不操作真实 DOM

提交阶段（Commit Phase）

• 不可中断
• 将协调阶段收集的所有副作用（effects）一次性应用到 DOM
• 触发生命周期方法（如 componentDidMount、useLayoutEffect）

这种分离使得 React 能在协调阶段灵活调度，而在提交阶段保证 DOM 操作的一致性和性能。

---

总结

维度	传统 React（Stack Reconciler）	React Fiber
渲染方式	同步、递归、不可中断	异步、可中断、基于任务切片
任务调度	无优先级	支持多优先级调度
性能表现	复杂更新易卡顿	更流畅，响应更快
架构	单阶段	双阶段（协调 + 提交）

Fiber 不仅是一次技术升级，更是 React 向并发渲染、渐进式 UI 更新迈出的关键一步。理解 Fiber，就是理解现代 React 高性能背后的秘密。