React 主要：Fiber 机制与 Diff 算法

前言

阅读这篇文章你将收获：

• 理解 Virtual DOM 的设计初衷
• 彻底搞懂 Fiber 架构为什么会出现、解决了什么问题
• 掌握 Diff 算法的三层策略与主要原因
• 理解事件循环与 React 调度的关系
• 解决卡顿、列表渲染错位、频繁重绘等常见痛点

一、一切从 Virtual DOM 说起

什么是 Virtual DOM？

JSX 经过 Babel 转译后会变成 React.createElement 调用：

// 你写的是这样
const App = (


);// Babel 转译后
const App = React.createElement(
'div'。{ className: 'container' },React.createElement
);

createElement 最终返回的是一个普通的 JavaScript 对象也就是 Virtual DOM 节点：

{
type的观点是。'div',props: {
className: 'container',children: }
}
]
}
}
]
}
}

为什么需要 Virtual DOM？按理说，

操作真实 DOM 太贵了。怎么说呢，

真实 DOM 节点背后关联着大量属性。每一次修改都可能触发浏览器的重绘和重排。而 Virtual DOM 只是一个轻量级的 JS 对象，创建和对比的代价极低。

工作流程:

你改数据
→ React 创建新的 VDOM
→ Diff 算法对比新旧 VDOM。只更新变化节点
→ 差异映射到真实 DOM（批量更新，减少重绘重排)

者只需关注业务数据，DOM 的增删改查全部交给 React，避免了手动调整导致的“页面卡顿、动画掉帧”痛点。

二、为什么会有 Fiber？—— Stack Reconciler 的危机

最初的递归方案

React 早期的协调器被称为 Stack Reconciler主要原因比较简单：对 Virtual DOM 树做递归遍历,一边对比一边更新。

function reconcile {
if {
// 新增节点
parentDOM.appendChild);} else if {
// 删除节点
parentDOM.removeChild;} else if {
// 替换节点
parentDOM.replaceChild,oldVDOM.dom);其实，} else {
//递归对比子节点...
}
}

递归的致命缺陷

问题	影响
不可中断	一次渲染占满主线程。导致 UI 完全卡死，
长期占用主线程	# 动画掉帧 # 输入框打字延迟 # 页面滚动卡顿

想象这样一个场景：一个复杂的 SPA 页面VDOM 树有几千个节点。当你触发一次 setState,React 必须递归遍历这些节点——这可能需要几十甚至上百毫秒. 在这期间：

• 使用者点击按钮 → “卡死无响应”
• 页面动画、滚动 → “掉帧、卡顿”
• 输入框打字 → “明显延迟感”

浏览器渲染机制回顾

浏览器主线程任务清单：
├──解析 HTML →生成 DOM 树
├──计算 CSS →生成 CSSOM 树
├──合并 →生成 Render Tree
├──布局→计算节点位置和尺寸
├──绘制→将像素画到屏幕上
├──执行 JavaScript
└──响应各类事件

“卡顿” . Fiber 正是为了解决这个问题而诞生的。

三、Fiber 机制：可中断的渲染

主要思想

任务分片·可中断·恢复·调度优先级。

A. 把整棵树拆成一个个小的"工作单元"。B. 每次只处理一个单元，接下来把控制权交还给浏览器。如果浏览器有空，就继续，如果有更高优先级任务，立刻中断。这样就实现了"时间切片"。

// 简化版 Fiber 主循环
let nextUnitOfWork = null;function workLoop {
while > 1) {
nextUnitOfWork = performUnitOfWork;}
if {
// 本帧未完成，留到下一帧继续
requestIdleCallback;老实说，} else {
// 所有工作完成。提交更新到真实 DOM
commitRoot;}
}
// 首次启动调度
requestIdleCallback;话说回来，

`requestIdleCallback` 是浏览器提供的 API。会在浏览器空闲时调用回调。React 利用它实现了**可中断**和**分帧渲染**。

Fiber 节点：全新的工作单元

// Fiber 节点结构
{
// ===== 基础信息 =====
type的观点是，'div',// 标签 / 函数组件 / 类组件
再看props，{ ... },// 包含 children
// ===== 与真实 DOM 的关联 =====
至于dom，domNode,// 对应真实 DOM
// ===== 树结构链接 =====
再看return，parentFiber,// 父节点指针
child这方面。firstChildFiber,// 第一个子节点指针
--- sibling: nextSiblingFiber,// 下一个兄弟指针
--- effectTag: 'PLACEMENT|UPDATE|DELETION',// 标记本次需要进行何种操作
--- alternate: oldFiber // 指向上一次渲染对应的 Fiber，实现双缓冲
}

`child`、`sibling`、`return` 三个指针把树形结构转化为链表，使得遍历可以随时“暂停”和“恢复”​。

说到遍历顺序示意，

 div
/ | \
h1 p span ← sibling 链表： h1.sibling → p.sibling → span
深度优先遍历顺序：
div → h1 → text → p → text → span → 回到 div 完成遍历

双缓存机制——画完再替换

当前显示树 ──► 正在建立的新树
│ 每个节点通过 alternate 指向旧树对应节点
│ 对比新旧属性/子树，标记 effectTag
└─► 完成后一次性 commit 到真实 DOM
↓
使用者看到的新 UI

This ensures that users always see a **stable UI**。avoiding half‑rendered states that often cause flickering or inconsistent layouts.

可中断 ≠ 随便中断

阶段	是否可中断	做什么
	✅ 可中断	遍历 Fiber 树，对比新旧属性/子元素并标记 effectTag
	❌ 不可中断	一次性将标记好的副作用应用到真实 DOM

四、Diff 算法：如何聪明地对比新旧 VDOM？

理论基础 — O vs O

If we naïvely compare every node with every or node complexity explodes to O. React 为了在实际项目里保持流畅，将复杂度降到了 O。关键是三个假设：

\ \ \ \ \ <\/tr>\ \ \ \ \ <\/tr>\ \ \ \ \ <\/tr>\ <\/table\>

假设	对应策略
Differing element types produce different trees.	Tree Diff – 跨层级移动极少，如果类型不同直接销毁并重新创建。
The order of elements within a list is stable when keyed.	Element Diff – 使用唯一 key 来复用已有元素，避免不必要的销毁/创建。
The component type determines wher it can be reused.	Component Diff – 同类型组件复用，仅比较 props；不同类型直接替换，

Tree Diff：按层比较

\

\
旧树的观点是，新树：

├── A \u2192 \u2192 ├── B
└── B \u2192 └── C
如果 A 整棵子树被移到另一个位置？说起来，React 会删除旧位置整体，再在新位置重新创建。这种取舍降低了算法复杂度。\<\/code\>\<\/pre\>

为什么不跨层比较？💡 实际项目里很少出现跨层级移动，这样可以把复杂度从 O 降至 O。


Pain Point: 很多同学在列表大量插入/删除时遇到页面整体重新渲染导致掉帧。使用唯一 key 能让 React 精确定位变动。仅做最小量移动，从根本上消除掉帧现象。

Component Diff：同类型复用，不同类型全量替换  🛠️  ​ ​ ​ ​ ​ ​ ​
javascript
// 类型不同 ➜ 重建

{/* before */}{/* after */}
// Result : 卸载 MyComponent ➜ 挂载 OrComponent
// 类型相同 ➜ 保留实例，仅更新 props

{/* before */}{/* after */}}
// Result : componentWillReceiveProps / useEffect 被调用。但实例不被销毁

Element Diff：同层级子节点对比

无 key 时：

css
旧： A B C D
新： B A D C 

React 按位比较：
0️⃣ A vs B -> 删除 A + 插入 B
1️⃣ B vs A -> 删除 B + 插入 A
2️⃣ C vs D -> 删除 C + 插入 D
3️⃣ D vs C -> 删除 D + 插入 C 

=> 共计8 次 DOM 操作！只是顺序交换，却导致整棵子树重建 😱


有 key 时：

css
旧： {key:'A'} {key:'B'} {key:'C'} {key:'D'}
新： {key:'B'} {key:'A'} {key:'D'} {key:'C'}

React 用 key 匹配：
• 找到相同 key 后只做移动。不销毁或重新创建
=> 最终仅产生四次移动操作，无额外重绘！

⚠️ 常见错误: 使用 index 做 key 会导致上述 “顺序改变却全量销毁” 的问题。

js
// ❌ 错误示例 —— index 当 key
list.map=>)

// 在头部插入一条数据时会触发全部销毁重建！

✅ 正确做法: 使用唯一且稳定的数据 ID：

js
list.map



Diff 整体流程概览 🔄  


scss
beginWork:
• 比较 fiber.type 与旧节点是否相同
├─ 不同 ➜ 标记 DELETION + PLACEMENT
└─ 相同 ➜ 深入 diff
• 若是普通 DOM 元素 ➜ diffProps
– 新增/变更属性 ➜ UPDATE
– 删除属性 ➜ 移除
• 若是组件 ➜ 渲染组件获取新的子元素
– reconcileChildren
○ 遍历 newChildren
○ 用 key 与 oldChildren 匹配
○ 标记 PLACEMENT / DELETION / UPDATE
○ 建立新的 Fiber 子链表


下面展示一次典型 setState 的完整旅程，让你看到 每一步如何避免卡顿和不必要渲染

php
. setState 被调用
↓ . 创建 Update 对象放入对应 Fiber 的 updateQueue
↓ . 从触发更新的 Fiber 向上寻找根节点
↓ . 从根开始进入 Render 阶段
│ ├─ beginWork ：遍历每个 Fiber 节点
│ │ ├─ 对比 props ➜ Diff Props
│ │ ├─ 对比子元素 ➜ Diff Children
│ │ └─ 根据差异标记 effectTag
│ └─ completeWork ：收集 effectList
↓ . Commit 阶段
│ ├─ before mutation ：执行 getSnapshotBeforeUpdate
│ ├─ mutation ：依据 effectTag 操作真实 DOM
│ └─ layout ：执行 componentDidMount / componentDidUpdate / useEffect
↓ . 浏览器最终呈现最新 UI


关键关系 


Render 阶段—利用 Fiber 链表+时间切片实现 可中断让 UI 在长列表或复杂页面仍保持响应。

Diff 算法—通过 Tree/Component/Element 三层假设+key。将理论上的 O 降至 O，显著降低每帧工作量。

Commit 阶段—一次性批量写入真实 DOM，保证 原子性 与 一致性。不过，





Pain Point Recap:


Trouble rendering large lists?👉 使用唯一 key + Fiber 时间切片，让每帧只处理少量节点。

Sporadic UI 卡顿或输入延迟?👉 Fibers 把长任务拆分。可让浏览器先处理高优先级交互，再继续渲染。不过，

Mysterious “re‑mount” of components after state change?👉 Component Diff 确保相同类型组件复用，仅更新 props。

Difficult debugging of “*** my list re‑orders cause full re‑render”?👉 理解 Element Diff 与 key 匹配原理，即可快速定位并修复。说起来，
<\/ul>
<\/div>




©2026 前端技术社区 | 如有疑问。请在评论区留言或加入我们的技术交流群 🚀<\/footer>

。

---