各位同学，大家好！
欢迎来到今天的“React 深度解剖与灵魂拷问”讲座。我是你们的主讲人，一个在代码堆里摸爬滚打多年，看着 React 从一个简单的库变成一个庞大架构的“资深专家”。
今天我们要聊的话题，非常宏大，也非常迷人。它关乎 React 的核心哲学——“UI 即状态函数”，以及 React 团队是如何通过 Fiber 架构，把这个听起来像数学公式一样的哲学，变成浏览器真正听得懂的、一行行指令式的底层操作。
这不仅仅是一个技术话题，这是一场关于“如何欺骗浏览器”的艺术。或者更准确地说，是一场关于“如何在单线程上模拟多线程”的工程奇迹。
准备好了吗？让我们开始吧。
第一章：数学家的梦 vs. 浏览器的现实
首先，我们要理解 React 的核心咒语是什么。如果你翻开 React 的官方文档，或者哪怕只是看一眼代码，你会发现这句话：
UI = f(state)
翻译成人话就是：界面是状态的函数。
这是什么意思呢？想象一下，你是一个数学天才。你有一个函数 f(x)。如果你输入 x = 1，你得到 y = 2；如果你输入 x = 2，你得到 y = 4。这很棒，对吧？这就是声明式编程。你不需要关心函数内部怎么算的，你只需要给输入，它就给你输出。
在 React 里，你的组件就是一个函数：
// 这是一个典型的 React 组件，声明式
function Counter({ count }) {
return (
<div>
<h1>当前数字是：{count}</h1>
<button onClick={() => setCount(count + 1)}>加一</button>
</div>
);
}当你点击按钮，count 变了，你调用 setCount。React 就会重新执行这个函数，传入新的 count，然后告诉你：“嘿，现在 DOM 应该长成这个样子。”
这多优雅啊！你不需要写 document.getElementById('btn').click()，也不需要手动去修改 DOM 节点的文本。你只需要描述“我想看到什么”。
但是，浏览器不这么想。
浏览器是个粗人。浏览器只知道 DOM（文档对象模型）。DOM 是什么？DOM 是浏览器构建的一棵巨大的树，每一个节点都是一个 HTML 标签。浏览器如何改变界面？它不知道“状态”是什么鬼，它只知道“指令”。
浏览器要改变一个字，它得调用 element.textContent = 'Hello'；它要加个按钮，它得调用 document.createElement('button')，然后 appendChild。
所以，问题来了：React（数学家）想让你描述结果（UI），但浏览器（粗人）只想让你下命令（DOM 操作）。
React 很早就意识到了这个问题，于是它发明了 Virtual DOM。Virtual DOM 其实就是一棵轻量级的 JavaScript 对象树，它长得和真实的 DOM 树一模一样，但是它是纯 JS 的。
当你的状态变了，React 会重新计算一遍 Virtual DOM，然后拿着新的树和旧的树去对比（Diff 算法），找出最小的差异，最后生成一串指令，告诉浏览器：“把那个 div 删了，把那个 span 文本改一下，把那个 img 的 src 换了。”
这就是 React 的工作流程：声明式 -> 虚拟 DOM -> 指令式。
但是，React 15 之前有个大问题：太慢了。
如果树很大，React 就得同步地把整个树算一遍，把整个树 diff 一遍，然后一次性把所有指令发给浏览器。如果算得慢了，页面就会卡顿，因为浏览器在等 React 算完。
这时候，React 团队意识到：我们需要把“计算”变成“调度”。 我们不能让 React 独占主线程，我们需要让 React 像切蛋糕一样，切成小块，一点一点地做。
这时候，Fiber 架构 诞生了。
第二章：Fiber——链表的艺术
为了实现“切蛋糕”，React 引入了 Fiber。Fiber 是什么？
在 React 15 里，组件树是一个扁平的数组结构（或者是树，但是遍历方式很死板）。
在 React 16+ 里，组件树变成了一串 链表。
为什么要用链表？因为链表是“可中断”的！
想象一下，你有一个长长的传送带，上面挂满了包裹。你是个工人，你的任务是把每个包裹检查一遍。如果传送带是一条直线（数组），你必须从头走到尾，检查完所有包裹才能下班。这中间如果有人叫你，你没法停下来，因为你在半路。
但如果传送带是一串珠子（链表），每颗珠子都有一根绳子连着下一颗。你可以抓住第一颗珠子，检查一下，然后说：“好，我累了，先放这，等会儿再检查剩下的。”然后你松手，去休息。等会儿你回来，再抓住下一颗珠子继续。
Fiber 节点就是这颗“珠子”。
每个 Fiber 节点都是一个 JavaScript 对象，它包含了当前组件的所有信息：
- type: 组件的类型（函数、类、原生标签）。
- props: 传入的属性。
- stateNode: 真实的 DOM 节点（如果有的话）。
- return: 指向父节点的指针（链表）。
- child: 指向第一个子节点的指针。
- sibling: 指向下一个兄弟节点的指针。
- alternate: 这是一个黑科技。每个 Fiber 节点都有两个版本：一个代表“当前的界面”（Current Fiber），一个代表“正在构建的界面”（WorkInProgress Fiber）。这就是 Diff 的基础。
看，这就是 React 如何把“UI 是状态函数”这个抽象概念，落地到“链表节点操作”这个具体指令上的。它不再是一个巨大的树计算过程，而是一个遍历链表的过程。
第三章：调和——Diff 算法的指令化
现在，React 有了一个链表（Fiber 树）。接下来，我们要做的就是“调和”。
调和的过程，其实就是 遍历链表 的过程。这个过程被拆成了两个阶段：
- Render Phase（渲染阶段）： 构建 WorkInProgress 树。这是最耗时的一步。React 会遍历旧树，创建新树，决定哪些节点需要复用，哪些需要创建，哪些需要删除。注意：这一步是可以被打断的！
- Commit Phase（提交阶段）： 把计算结果应用到真实 DOM 上。这一步是同步的，不能被打断。
让我们深入看看 Render Phase 是怎么工作的。这其实就是一段巨大的 while 循环。
3.1 beginWork：创建与比较
React 的核心循环大概是长这样的（伪代码）：
function workLoop() {
while (workInProgress !== null) {
// 1. 开始处理当前节点
workInProgress = performUnitOfWork(workInProgress);
}
// 如果 workInProgress 是 null，说明树遍历完了，可以提交了
}
function performUnitOfWork(fiber) {
// 如果有子节点，先处理子节点（深度优先）
if (fiber.child !== null) {
return fiber.child;
}
// 如果没有子节点，处理兄弟节点
let nextFiber = fiber.sibling;
// 如果兄弟节点也没有了，回溯到父节点
while (nextFiber === null) {
// 找到父节点
const returnFiber = fiber.return;
if (returnFiber === null) {
return null; // 树遍历结束
}
// 父节点还有兄弟节点吗？
nextFiber = returnFiber.sibling;
fiber = returnFiber;
}
return nextFiber;
}这段代码看起来简单，但它就是 React 的灵魂。
当 performUnitOfWork 被调用时，React 就在说：“嘿，Fiber 节点 A，你该干活了。”
Fiber 节点 A 会检查自己有没有子节点。如果有，它调用 beginWork，创建子节点的 Fiber 节点 B。然后 React 继续处理 B。
这就形成了一个深度优先的遍历。这就像你走进一个迷宫，先沿着左边的路一直走，走到死胡同了，再退回来，走右边的路。
在这个过程中，React 会做 Diff。比如，旧树里有个 div，新树里也有个 div，React 就会对比它们的 key 和 type。如果一样，它就复用这个 Fiber 节点（通过 alternate 指针），只更新 props 和 state。
3.2 完成工作：completeWork
当 beginWork 处理完一个节点，或者一个叶子节点（比如一个 <button>）处理完后，React 会调用 completeWork。
这个函数的作用，就是把刚才在内存里构建好的 Virtual DOM（Fiber 树），真正地变成指令。
比如，你有一个 Fiber 节点，它的 type 是 'button'，props 是 { children: 'Click Me' }。
在 completeWork 里，React 会做类似这样的操作（伪代码）：
function completeWork(current, workInProgress) {
const tag = workInProgress.tag;
// 如果是原生 DOM 节点
if (tag === HostComponent) {
const newProps = workInProgress.pendingProps;
// 1. 创建真实的 DOM 节点
const domNode = workInProgress.stateNode;
// 如果是第一次创建（不是复用）
if (!domNode) {
const instance = createInstance(
newProps.type,
newProps.props,
rootContainerInstance,
current || workInProgress,
workInProgress
);
workInProgress.stateNode = instance;
// 2. 将 DOM 节点插入到父节点中
appendAllChildren(instance, workInProgress);
// 3. 处理副作用
finalizeInitialChildren(instance, newProps);
} else {
// 如果是复用节点（Diff 后发现只是改了文本）
updateProperties(domNode, current.props, newProps);
}
}
// 返回下一个需要处理的节点
return workInProgress.sibling;
}看！这就是“指令式”的体现！
createInstance -> appendChild -> updateProperties。
React 正是在这里，把你之前描述的“UI 是状态函数”，转化成了浏览器听得懂的“创建节点”和“修改属性”。
第四章：调度器——时间切片
现在，我们已经知道了 React 如何把声明式代码变成指令式操作（Render Phase），也知道了它如何用链表结构来组织这些操作。
但是，还有一个问题没解决：如果树很大，Render Phase 还没跑完，用户去点击按钮怎么办？页面不就卡死了吗？
这就是 Scheduler（调度器） 登场的时候了。
React 16 引入了 requestIdleCallback（在浏览器中）或者类似的机制。这允许我们在浏览器“空闲”的时候执行任务。
React 的调度器是这样的：
- 当你点击按钮，React 并不会立刻开始疯狂计算。
- 它会告诉调度器：“嘿，我有个任务，大概需要 5ms，能不能在浏览器空闲的时候做？”
- 调度器说：“好，等会儿吧。”
- 浏览器处理完其他的渲染任务（比如绘制上一帧），终于空闲了。
- 调度器回调 React，React 开始执行
workLoop。
但是，React 不能只跑 5ms 就停，因为那样界面还没更新完。所以，React 会设定一个预算（比如 5ms 或 2ms）。
function workLoopScheduler() {
// 记录开始时间
const startTime = performance.now();
while (workInProgress !== null) {
// 执行单元工作
workInProgress = performUnitOfWork(workInProgress);
// 计算已经用的时间
if (performance.now() - startTime > frameBudget) {
// 时间到了！
// 告诉调度器：“我还没干完呢，下次空闲的时候再叫我。”
requestIdleCallback(workLoopScheduler);
return; // 挂起
}
}
// 干完了！
commitRoot();
}这就是 时间切片。
它让 React 变成了一个“碎片化的执行者”。它不再是同步地吞噬 CPU，而是像蚂蚁搬家一样，一点一点地移动。
这有什么好处呢？
- 不阻塞主线程： 浏览器还有时间响应用户的滚动、点击，界面不会卡死。
- 高优先级任务插队： 如果用户又点击了按钮，React 会把这个任务标记为“高优先级”，暂停当前的低优先级渲染，先去处理高优先级任务。
第五章：代码实战——构建一个微型 Fiber 引擎
光说不练假把式。让我们来写一个极其简化的 Fiber 引擎，感受一下那种“把数学变成链表”的快感。
这个引擎会包含：
- FiberNode 类：定义链表结构。
- createWorkInProgress：Diff 逻辑（简化版）。
- render：调度逻辑。
// 1. 定义 Fiber 节点结构
class FiberNode {
constructor(type, props) {
this.type = type; // 组件类型
this.props = props;
this.stateNode = null; // 真实 DOM
this.return = null; // 父节点
this.child = null; // 第一个子节点
this.sibling = null; // 下一个兄弟节点
this.alternate = null; // 对应的旧节点（用于 Diff）
}
}
// 2. 模拟 Diff 算法（简化版）
// 假设我们有两个节点，一个是旧的（current），一个是新的（workInProgress）
function updateNode(fiber, oldProps = {}, newProps = {}) {
Object.keys(newProps).forEach(key => {
if (key !== 'children') {
// 如果属性变了，就更新 DOM
if (newProps[key] !== oldProps[key]) {
if (fiber.stateNode) {
fiber.stateNode[key] = newProps[key];
}
}
}
});
}
// 3. 核心 Render 函数（Reconciliation）
function render(element, container) {
// 获取旧的根 Fiber 节点（如果有）
let currentFiber = container.__rootFiber;
// 创建新的根 Fiber 节点
let workInProgressFiber = new FiberNode(element.type, element.props);
workInProgressFiber.stateNode = container; // 根节点的 stateNode 指向容器
// 关键步骤：Diff 逻辑
if (currentFiber) {
workInProgressFiber.alternate = currentFiber;
currentFiber.alternate = workInProgressFiber;
}
// 开始调度（这里简化为同步执行，实际是异步的）
reconcileChildren(workInProgressFiber, element.props.children);
// 提交阶段（简化：直接操作 DOM）
commitRoot(container);
}
// 4. 递归 Diff 子节点
function reconcileChildren(returnFiber, newChildren) {
let oldFiber = returnFiber.alternate?.child;
let newFiber = null;
let prevNewFiber = null;
// 遍历新的子节点数组
for (let i = 0; i < newChildren.length; i++) {
let newChild = newChildren[i];
// Diff：对比新旧节点的 type
let sameType = oldFiber && newChild.type === oldFiber.type;
if (sameType) {
// 类型相同，复用
newFiber = new FiberNode(newChild.type, newChild.props);
newFiber.alternate = oldFiber;
newFiber.return = returnFiber;
// 关键：调用 completeWork，在这里我们直接操作 DOM
// 真实的 React 会在这里做更复杂的属性更新
if(oldFiber.stateNode) {
updateNode(newFiber, oldFiber.props, newChild.props);
}
}
if (newFiber) {
prevNewFiber ? (prevNewFiber.sibling = newFiber) : (returnFiber.child = newFiber);
prevNewFiber = newFiber;
}
oldFiber = oldFiber?.sibling;
}
}
// 5. 提交阶段
function commitRoot(container) {
// 将根节点的真实 DOM 插入容器
if (!container.__rootFiber?.child) return;
let fiber = container.__rootFiber.child;
while (fiber) {
// 如果有子节点，递归处理
if (fiber.stateNode) {
if (fiber.return?.stateNode) {
fiber.return.stateNode.appendChild(fiber.stateNode);
}
}
fiber = fiber.sibling;
}
}
// --- 测试代码 ---
// 构建一个虚拟 DOM 树
const virtualDOM = {
type: 'div',
props: {
id: 'app',
children: [
{ type: 'h1', props: { children: 'Hello Fiber' } },
{ type: 'button', props: { children: 'Click Me', onClick: () => alert('Hi!') } }
]
}
};
// 模拟容器
const container = document.createElement('div');
document.body.appendChild(container);
container.__rootFiber = new FiberNode('div', virtualDOM.props);
// 执行渲染
render(virtualDOM, container);看这段代码，我们做了什么？
- 我们定义了
FiberNode。 - 我们写了一个
reconcileChildren循环。这就是 Diff 算法。它对比了新旧节点，如果是同一个类型，它就复用节点，只更新属性。 - 我们在
updateNode里写了fiber.stateNode[key] = newProps[key]。这就是把声明式的props变成了指令式的 DOM 属性修改。
这就是 React 的本质！它把你写的 JSX（看起来像 HTML 的 JS 对象），通过 Fiber 链表结构，一遍又一遍地遍历、对比、修改，最后变成浏览器能懂的样子。
第六章：深入细节——为什么我们需要 Alternate？
你可能会问：“我在上面的代码里写了 alternate，但好像没怎么用到啊？”
alternate 是 React 最精妙的设计之一。
在 React 的世界里，永远有两棵树在打架（或者合作）：
- Current Tree (当前树)：这是浏览器里正在展示的那棵树，它很稳定。
- WorkInProgress Tree (工作树)：这是 React 正在构建的新树，它是临时的。
当状态改变时，React 不会直接修改 Current Tree，因为它怕改错了。React 会先构建 WorkInProgress Tree。
在构建 WorkInProgress Tree 的过程中，它会利用 alternate 指针找到 Current Tree 里的对应节点。
- 如果
alternate存在，说明节点类型没变，React 会复用节点，只更新属性。 - 如果
alternate不存在，说明这是一个新节点，React 会创建它。
当 WorkInProgress Tree 构建完成后，React 会把它变成 Current Tree，然后清空 WorkInProgress Tree，准备下一轮渲染。
这种“双缓冲”技术（虽然不是真正的双缓冲，但逻辑类似），保证了 React 在渲染过程中的安全性。它不会因为一个渲染过程出错而破坏当前的界面。
第七章：Hook 的实现与 Fiber
最后，我们再聊聊 Fiber 和 Hook 的关系。
在 React 15 里，this.state 是基于闭包的，很难实现复杂的 Hook 逻辑。在 Fiber 架构下，每个 Fiber 节点都有一个 memoizedState 属性。
memoizedState 是一个链表结构，存储了当前组件的 State 和 Hook 的信息。
当你调用 useState 时，React 并不是在函数里存变量，而是在 Fiber 节点的 memoizedState 里存了一个对象：
{
value: 0, // 当前状态
queue: { action: (val) => ..., next: ... } // 更新队列
}当组件渲染时，React 会遍历 Fiber 树。如果发现某个 Fiber 节点的 memoizedState 里有东西，它就会从那里取值，而不是重新执行函数。
这把“状态”从函数的执行上下文中剥离出来，绑定到了数据结构（Fiber 节点）上。这使得 React 可以在不重新执行函数的情况下，也能根据状态的变化来决定是否需要重新渲染。
第八章：总结——从数学到物理
回顾一下我们的旅程。
React 的哲学是 “UI = f(state)”，这是一种纯粹的数学思维，是抽象的、优雅的、声明式的。
浏览器是 “指令式” 的，它需要具体的 DOM 操作，是具体的、底层的、执行层面的。
Fiber 架构就是连接这两者的桥梁。
它通过 链表结构，把组件树变成了可遍历、可中断的数据结构。
它通过 双缓冲 技术，实现了安全的 Diff 算法。
它通过 时间切片，实现了非阻塞的渲染。
它通过 WorkInProgress，实现了状态与视图的分离。
当你在屏幕上敲下代码，写下 <button onClick={...}> 时，React 内部正在发生一场巨大的风暴：
- 它解析你的 JSX。
- 它构建 Fiber 链表。
- 它遍历链表，对比新旧节点。
- 它生成指令，修改 DOM。
- 它处理副作用，更新 State。
这一切都在毫秒之间完成，但在底层，却是无数行精妙的 JavaScript 代码在链表节点间穿梭。
所以，当你下次看到 React 的 Loading 动画转圈圈的时候，不要觉得那是卡顿。那其实是 React 正在试图把你的“数学梦想”，翻译成浏览器的“物理指令”。而 Fiber，就是那个翻译官。
好了，今天的讲座就到这里。希望大家以后看到 React 源码里的 FiberNode、workInProgress、performUnitOfWork 时，能会心一笑：“嘿，老伙计，我知道你在干嘛。”
下课！