曾在面试中被问到「什么是 React Fiber？」然后大脑瞬间空白过吗？
你并不孤单。
“React Fiber” 听起来像是某种神秘的内部机制，但它其实是支撑现代 React 运作的核心概念之一。
如果你能清晰地解释它，而不仅仅是背定义，你会立刻显得像是一名资深前端工程师。
下面我们就按照 React 自己的方式来拆解它：一步一步、逐层理解。
什么是 React Fiber？
从本质上讲，React Fiber 是 React 的协调算法（reconciliation algorithm）的重写版本，它负责判断该渲染什么、何时渲染。
在 Fiber 之前（React 15 及更早版本），React 的渲染是同步的： 一旦开始渲染，就无法暂停或中断，直到任务完全完成。
这种机制在小型 UI 中还算可行，但在大型交互式应用中就会变得卡顿不堪。
它实现了4个具体目标
- 可中断的渲染：Fiber 允许将大的渲染任务拆分成多个小的工作单元（Unit of Work），使得 React 可以在空闲时间执行这些小任务。当浏览器需要处理更高优先级的任务时（如用户输入、动画），可以暂停渲染，先处理这些任务，然后再恢复未完成的渲染工作。
- 优先级调度：在 Fiber 架构下，React 可以根据不同任务的优先级决定何时更新哪些部分。React 会优先更新用户可感知的部分（如动画、用户输入），而低优先级的任务（如数据加载后的界面更新）可以延后执行。
- 双缓存树（Fiber Tree）：Fiber 架构中有两棵 Fiber 树——current fiber tree（当前正在渲染的 Fiber 树）和 work in progress fiber tree（正在处理的 Fiber 树）。React 使用这两棵树来保存更新前后的状态，从而更高效地进行比较和更新。
- 任务切片：在浏览器的空闲时间内（利用 requestIdleCallback思想），React 可以将渲染任务拆分成多个小片段，逐步完成 Fiber 树的构建，避免一次性完成所有渲染任务导致的阻塞。
react内部有两颗树维护着两个状态：一个是fiber tree，一个是work in progress fiber tree
- fiber tree:表示当前正在渲染的fiber树
- work in progress fiber tree:表示更新过程中新生成的fiber树，也就是渲染的下一次UI状态
举个例子:
当我们用 canvas 绘制动画时，每一帧绘制前都会调用 ctx.clearRect 清除上一帧的画面，如果当前帧画面计算量比较大，导致清除上一帧画面到绘制当前帧画面之间有较长间隙，就会出现白屏。
为了解决这个问题，我们可以在内存中绘制当前帧动画，绘制完毕后直接用当前帧替换上一帧画面，由于省去了两帧替换间的计算时间，不会出现从白屏到出现画面的闪烁情况
React Fiber（在 React 16 中引入）改变了这一点。它带来了一个全新的架构，使得渲染过程可以：
- ✅ 可中断（Interruptible）
- ✅ 可优先级调度（Prioritized）
- ✅ 可增量执行（Incremental）
这让 React 拥有了在保持 UI 流畅的同时，暂停、恢复甚至放弃某项渲染工作的能力。
Fiber = 一种数据结构，而不是魔法
让我们具体一点。
在 React 内部，每一个元素（无论是组件、DOM 节点还是 Fragment）都会被表示为一个 Fiber 节点。
Fiber 其实就是一个普通的 JavaScript 对象，结构大致如下：
可以把 Fiber 节点看作一个工作单元（unit of work） 。 React 在执行更新时，会遍历这些 Fiber 节点，并且在必要时可以暂停执行， 以便处理更高优先级的任务（比如用户输入）。
为什么 Fiber 对渲染如此重要
当 React 更新 UI 时，会经历两个阶段：
- Render Phase（渲染阶段） → 构建新的 Fiber 树（此阶段可被暂停）
- Commit Phase（提交阶段） → 将变更实际应用到 DOM（此阶段不可暂停）
Fiber 的存在，使 React 能在 Render 阶段智能地调度工作。
举个例子：当你在输入框中打字时，同时一个庞大的列表正在重新渲染，React 可以暂停列表的更新，优先处理用户输入。
这就是 Fiber 带来的核心能力。
示例：Fiber 的任务调度
下面这个简单示例，模拟了 React Fiber 背后的「任务调度」思想：
虽然这只是简化版本，但它体现了 Fiber 的核心理念：把渲染拆分为一个个小的工作单元（unit of work） ，并在浏览器空闲时间内逐步执行。
这就是为什么即便在高负载下，React 依然能保持流畅。因为渲染过程是异步的、协作式的（cooperative） 。
面试时该如何解释 React Fiber
当面试官问你：“What is React Fiber?” 时，你可以这样回答：
React Fiber 是 React 16 引入的新协调引擎。它将渲染过程拆分成多个小的工作单元（Fiber），让 React 可以暂停、恢复、并根据优先级执行更新，从而实现流畅的、非阻塞式的 UI。它也为并发渲染（Concurrent Rendering）和 Suspense 等特性打下基础。
如果你想再补充一点：
每个 Fiber 节点都代表 React 树中的一个元素，并保存对父节点、子节点和兄弟节点的引用。React 利用这种链式结构高效地进行 Diff 和 UI 更新。
这样回答，既专业又清晰，几乎能完美拿下这个问题。
进阶理解：并发（Concurrency）
React Fiber 为 Concurrent Rendering（并发渲染） 打下了基础，而并发特性是在 React 18 中正式推出的。
比如以下这些能力：
useTransition()SuspensestartTransition()
这些特性都依赖于 Fiber 的核心机制 ——暂停低优先级任务并在稍后恢复执行。
理解 Fiber，也就理解了 React 为什么需要并发渲染。
总结
React Fiber 不只是一个“术语”，它是现代 React 能够实现流畅交互与并发特性的核心基石。
当你真正理解 Fiber 后，你就能更深入地思考 React 的性能、渲染机制和响应式架构。
所以下次当面试官问你 “What’s React Fiber?” 时，你不仅能回答——还能讲清楚。🔥
原文作者： Rahul Dinkar
