各位，各位，把手里的咖啡放下，把刚发的工资收好。今天我们不聊业务逻辑，不聊怎么用 useEffect 防抖，也不聊怎么把 class 组件改成 function 组件。今天，我们要钻进 React 的肚子里，去看看它是怎么“变魔术”的。
你们有没有想过，为什么你在一个页面里疯狂点击按钮，页面还能丝般顺滑，没有卡顿？为什么 React 能做到“状态更新 -> 视图刷新”这一套动作行云流水，仿佛魔法一样？
答案就在两个字：Fiber。
而 Fiber 机制中最核心、最玄学、也是最硬核的部分，就是这个听起来有点像“光纤”或者“纤维”的东西——双缓存。
来，搬个小板凳坐好。今天我们要讲的是：React Fiber 双缓存机制：Current 树与 WorkInProgress 树的内存物理切换大戏。
第一幕：DOM 的“泥瓦匠”困境
在深入 Fiber 之前，我们得先明白 React 以前是怎么工作的，以及它为什么要搞这套双缓存。
想象一下，你是一个泥瓦匠。你面前有一面墙（DOM 树）。现在，老板来了，说：“这面墙颜色不对，给我换一种红色的砖头。”
作为一个普通的泥瓦匠，你的操作流程大概是这样的：
- 拆掉这面墙（删除旧节点）。
- 搭架子（创建新节点）。
- 把新砖头砌上去（插入新节点）。
- 把旧砖头扔掉。
这个过程很直观，对吧？但问题来了：在拆掉旧墙的时候，这面墙就没了！
如果你在砌新墙的过程中，突然有人推了你一把，或者你想暂停一下喝口水，结果会怎样？旧墙没了，新墙还没砌好，这面墙就空了。这叫什么？这叫“半成品灾难”。
传统的 React（或者是没有 Fiber 之前）就是这样一个泥瓦匠。它直接在 DOM 上动刀。你想更新一个按钮的文字，它可能先把按钮删了，再创建一个新的。如果在这个过程中，你强行中断了任务（比如用户快速点击了 100 次），React 就会陷入混乱，或者直接导致页面闪烁、状态丢失。
所以，React 意识到：你不能在“真·画布”（DOM）上直接画。你得先在“草稿纸”（内存）上画，画完了，啪的一下，把草稿纸换上去。
这就引出了我们的主角——双缓存。
第二幕：Fiber 节点——不是树，是链表
在进入双缓存之前，我们先得认识一下 Fiber 节点。很多面试题会问你：“React Fiber 是什么？”
如果你回答“它是虚拟 DOM 的增强版”，那你就只答对了一半。Fiber 节点本质上就是一个 JavaScript 对象，但它构建起来不是一棵树，而是一条长长的、复杂的链表。
为什么是链表？因为树太重了，而且很难“暂停”和“恢复”。
看下面这个伪代码，一个典型的 Fiber 节点结构：
class FiberNode {
constructor(tag, props, stateNode) {
// tag: 代表这个节点是什么组件（函数组件、类组件、容器等）
this.tag = tag;
// props: 传给组件的属性
this.props = props;
// stateNode: 指向真实的 DOM 节点（如果是 HostComponent）
this.stateNode = stateNode;
// --- 核心指针：父子、兄弟关系 ---
this.return = null; // 指向父节点
this.child = null; // 指向第一个子节点
this.sibling = null; // 指向下一个兄弟节点
// --- 双缓存的关键 ---
this.alternate = null; // 指向它的“双胞胎”
}
}注意看这个 alternate 属性。这就是双缓存机制的灵魂。
第三幕：内存中的“双胞胎”
在 React 的世界里，内存里永远躺着两棵树。它们长得一模一样，就像一对双胞胎。
-
Current Tree (当前树)：
- 这就是现在屏幕上显示的那棵树。
- 它是“成品”，是经过浏览器渲染的，是“老板”。
- 它的
stateNode指向真实的 DOM 节点。
-
WorkInProgress Tree (工作树)：
- 这是一棵正在构建中的树。
- 它是“草稿”，在内存里，还没画到 DOM 上。
- 它的
stateNode可能是null，或者指向一个临时的 DOM 节点。
双缓存的核心逻辑就是：在内存中同时维护这两棵树，利用 alternate 指针让它们互相指认。
让我们来演示一下这个初始化过程。
假设我们现在有一个根组件 App，它在内存中对应一个 Fiber 节点，我们称之为 FiberRoot。
// 1. 创建 Current 树的根节点
const currentFiber = new FiberNode(HostRoot, { value: 1 }, null);
// 2. 创建 WorkInProgress 树的根节点（此时还是空的）
const workInProgress = new FiberNode(HostRoot, { value: 1 }, null);
// 3. 建立双胞胎关系
currentFiber.alternate = workInProgress;
workInProgress.alternate = currentFiber;看，现在它们就像这样：
currentFiber 指着 workInProgress，workInProgress 也指着 currentFiber。
这就是所谓的“物理切换”的准备工作。它们在内存里是互为镜像的。
第四幕：渲染开始——克隆与变身
当用户点击按钮，触发状态更新时，React 的调度器就开始工作了。它会说：“好，兄弟们，开工了！”
第一步：克隆 Current 树
React 并不会凭空捏造一棵树。它会拿着 currentFiber，照着葫芦画瓢，在内存里克隆出一棵一模一样的树。这棵新树就是 workInProgress。
但是，React 可不是傻乎乎地把所有属性都复制一遍。它是在递归的过程中，动态地创建节点的。
function reconcileChildren(currentFiber, workInProgressFiber) {
// 1. 先克隆当前节点的属性
workInProgressFiber.props = currentFiber.props;
workInProgressFiber.type = currentFiber.type;
workInProgressFiber.stateNode = currentFiber.stateNode; // 暂时指向同一个 DOM
// 2. 建立父子关系
// currentFiber.child 是它的长子
let nextChild = currentFiber.child;
// 循环遍历所有子节点
while (nextChild) {
// 创建一个新的 Fiber 节点
const child = new FiberNode(nextChild.tag, nextChild.props, nextChild.stateNode);
// 关键：建立双胞胎关系
child.alternate = nextChild;
nextChild.alternate = child;
// 建立父子、兄弟指针
child.return = workInProgressFiber;
workInProgressFiber.child = child;
// 移动指针
nextChild = nextChild.sibling;
}
}在这个过程中，workInProgress 树正在疯狂生长。它长得越快，current 树就越安全。因为 current 树在原地没动，它的 stateNode 还指着真实的 DOM。
为什么这么做？
为了中断。假设你有一棵树有 1000 个节点，React 只能执行 5 毫秒。怎么办？
React 可以遍历到第 500 个节点，突然大喊一声：“停！该执行下一个任务了！”
如果没有双缓存，React 把第 500 个节点删了，那之前的 499 个节点去哪了？没了。这就是为什么以前 React 容易卡死或者白屏的原因。
但现在，有了双缓存，React 暂停的时候，current 树还在那里稳如泰山。它没动，DOM 也没动。React 只是把控制权交还给调度器，等下次再回来，继续从第 500 个节点往下画。
第五幕：协调与更新
好了，现在 workInProgress 树已经克隆完毕，它就像一个刚出生的婴儿，虽然长得像它爹（Current），但还没有自己的灵魂。
接下来就是协调阶段。React 会拿着 workInProgress 树，去和 current 树（也就是旧的虚拟 DOM）做对比。
这就像两个泥瓦匠，一个拿着旧图纸（current），一个拿着新图纸（workInProgress）。
function reconcile(currentFiber, workInProgressFiber) {
// 比较类型
if (currentFiber.type !== workInProgressFiber.type) {
// 类型变了，比如从 <div> 变成了 <span>，或者函数组件变了
// 那就需要销毁旧的，创建新的
return createFiberFromTypeAndProps(workInProgressFiber.type, ...);
}
// 比较属性
if (currentFiber.props !== workInProgressFiber.props) {
// 属性变了，比如 textContent 变了
// 更新 props
workInProgressFiber.props = workInProgressFiber.props;
}
// 比较子节点（递归）
// ...省略递归逻辑...
// 返回更新后的 workInProgress 节点
return workInProgressFiber;
}在这个过程中，workInProgress 树的节点属性会被一个个修改。如果是同一个节点，React 会复用它（复用 stateNode）。如果是新节点，React 就会创建一个。
重点来了：此时，内存里依然有两棵树！
current 树还在那里睡觉，workInProgress 树在疯狂修改自己的属性。
第六幕：提交——啪的一下，物理切换
终于，所有的协调工作都做完了。workInProgress 树已经是一个完美的、最新状态的新树。而 current 树还是旧的树。
现在，React 要做最后一步，也是最震撼的一步：提交。
React 会把 workInProgress 树的根节点，赋值给 current 树的根节点。
// 提交阶段
function commitRoot(root) {
// 1. 获取根节点
const workInProgressRoot = root.current;
const currentRoot = workInProgressRoot.alternate;
// 2. 物理切换！
// 把 WorkInProgress 树变成 Current 树
root.current = workInProgressRoot;
// 3. 把原来的 Current 树变成 WorkInProgress 树（为了下一次渲染做准备）
// 此时，原来的 currentRoot 就变成了下一次渲染的 workInProgress
workInProgressRoot.alternate = currentRoot;
currentRoot.alternate = workInProgressRoot;
// 4. 开始更新 DOM
commitAllHostEffects(workInProgressRoot);
}这一步操作，在内存里发生了什么？
root.current指针变了。- 所有的
FiberNode.alternate指针互换了。 - React 开始遍历
workInProgressRoot，把它的stateNode（真实的 DOM）渲染到屏幕上。
视觉上的效果是什么？
屏幕上的 DOM 节点瞬间变了。
对于用户来说，这就是一次“状态更新”。
对于 React 内部来说，这就是一次“双缓存树的物理交换”。
这就好比：
current是你正在播放的电影。workInProgress是你剪辑好的下一帧。- 提交的时候，你把播放器指针拨到了下一帧。
- 然后你继续剪辑下一帧。
整个过程在内存中是瞬间完成的，用户根本感觉不到中间有一个“删除旧树 -> 创建新树”的痛苦过程。
第七幕：深入探讨——为什么要这么麻烦？
有的同学可能会问：“我不懂，能不能直接在 DOM 上改？比如把 div 的 textContent 改了，不就完了吗？”
兄弟，你这是在玩火啊。
- DOM 操作很贵：虽然现代浏览器优化得不错，但在 JS 里面改一个属性，然后通知浏览器重绘，这开销也是有的。
- 时间切片的基石：React 16 引入的并发模式，核心就是 Fiber。没有双缓存，你根本没法实现“暂停”和“恢复”。你没法在一个递归函数里暂停，然后过一秒再继续。但有了双缓存，你就可以把“构建树”这个任务拆解成无数个小任务，做完一个就切出去，做完下一个再切回来。
- 错误边界：如果在构建
workInProgress树的过程中，某个组件报错了，React 可以直接把workInProgress扔掉，然后告诉用户：“哎呀，出错了，我们还是显示旧的那一版吧。” 这就是双缓存带来的容错能力。
第八幕：代码实战——模拟一次完整的双缓存切换
为了让大家彻底明白，我们来写一个极其简化版的 React，模拟一下这个过程。
// 1. 定义 Fiber 节点类
class FiberNode {
constructor(type, props, stateNode) {
this.type = type; // 组件类型
this.props = props;
this.stateNode = stateNode; // 对应的真实 DOM 节点
this.return = null; // 父节点
this.child = null; // 子节点
this.sibling = null; // 兄弟节点
this.alternate = null; // 双胞胎
}
}
// 2. 模拟 DOM 操作
const domMap = new Map(); // 简单的内存 DOM 管理
function createDOM(type) {
const el = document.createElement(type);
domMap.set(el, type);
return el;
}
// 3. 核心渲染函数
function render(element, container) {
// A. 初始化 Current 树
let currentFiber = new FiberNode(null, null, container);
currentFiber.stateNode = container;
// B. 初始化 WorkInProgress 树（克隆）
let workInProgress = cloneFiber(currentFiber);
// C. 开始调度（模拟时间切片）
workLoop(currentFiber, workInProgress);
}
// 克隆函数
function cloneFiber(sourceFiber) {
const child = new FiberNode(sourceFiber.type, sourceFiber.props, null);
child.alternate = sourceFiber;
sourceFiber.alternate = child;
child.return = sourceFiber.return || child; // 简化处理
return child;
}
// 协调循环
function workLoop(current, workInProgress) {
// 这里简化了递归，实际上是在遍历链表
while (workInProgress) {
// 模拟协调：更新 props
if (workInProgress.type !== current.type) {
// 类型变了，创建新 DOM
workInProgress.stateNode = createDOM(workInProgress.type);
console.log(`创建新节点: <${workInProgress.type}>`);
} else {
// 类型没变，更新 DOM 属性
console.log(`更新节点: <${workInProgress.type}> props=${workInProgress.props}`);
}
// 模拟构建子节点
if (workInProgress.props && workInProgress.props.children) {
workInProgress.child = cloneFiber(workInProgress.props.children);
}
// 模拟切换到下一个兄弟节点
workInProgress = workInProgress.sibling;
}
// 循环结束，意味着 WorkInProgress 树构建完成
// 执行提交
commitRoot(current, workInProgress);
}
// 提交阶段
function commitRoot(current, workInProgress) {
console.log("n>>> 开始提交 (物理切换) <<<");
// 1. 交换根节点指针
current.alternate = workInProgress;
workInProgress.alternate = current;
// 假设 workInProgress 的第一个子节点就是我们要渲染的内容
const domNode = workInProgress.child.stateNode;
// 2. 将 DOM 插入容器
// 注意：这里为了演示，我们直接把 DOM 放进去，实际 React 会做精细的 Diff
if (domNode) {
if (current.stateNode.lastChild !== domNode) {
current.stateNode.appendChild(domNode);
console.log(`DOM 更新成功: ${domNode.tagName}`);
}
}
console.log(">>> 提交完成 <<<n");
}
// --- 模拟调用 ---
// 场景：从 <div> 变成了 <h1>
// 1. 初始渲染
const root = document.getElementById('root');
render({ type: 'div', props: { children: 'Hello' } }, root);
// 2. 状态更新，变成 h1
// 注意：实际 React 会自动处理，这里手动模拟一下内存变化
// render({ type: 'h1', props: { children: 'World' } }, root); 在这个极简的代码里，你能看到：
current和workInProgress是两个独立的对象。cloneFiber建立了alternate指针。workLoop在构建workInProgress。commitRoot最后交换了指针，完成了更新。
第九幕：双缓存的代价与红利
说了这么多好处，双缓存就没有代价吗？
当然有。
代价就是内存。
React 必须在内存里同时保存两棵树。如果你的组件树非常深，有 10000 个节点，那么 React 就得在内存里同时维护 20000 个 Fiber 节点对象。
在移动端这种内存紧缺的设备上，这确实是一个负担。
但是，React 的开发者认为，流畅的交互体验（60fps）是第一位的，为了这个体验，牺牲一点内存是值得的。而且，React 的节点对象其实很轻量，它不像真实 DOM 那么重，所以这个内存开销是可控的。
第十幕：总结与升华
好了，各位，我们的讲座接近尾声。
回顾一下，React Fiber 的双缓存机制到底干了什么？
- 物理隔离：它把“正在构建”和“已完成”隔离开来。
- 双胞胎机制：利用
alternate指针，让两棵树互为镜像。 - 无缝切换：在内存中完成克隆和协调，最后在提交阶段原子性地交换根节点。
- 并发基石：因为
current树始终存在，React 才能随时暂停workInProgress的构建，去处理高优先级任务，然后再回来继续。
这就像是两个演员在舞台上。current 是台上的主演，演得正投入；workInProgress 是台下的替补，在背词、在排练。一旦主角演累了或者出错了，替补立马上场，无缝衔接。而原来的主演则退回后台，继续准备下一场戏。
这就是 React Fiber 的双缓存，一种在内存中精妙绝伦的物理操作，它让 React 不仅仅是一个 UI 库，更像是一个精密的调度系统。
下次当你看到页面流畅地滚动、点击时，别忘了，在屏幕的背后，有两棵树正在为了你的丝滑体验，在内存中疯狂地切换、克隆、更新。
好了，下课！记得去面试的时候，把这个双缓存机制讲得头头是道，吓唬吓唬面试官！