React 节点复用判定准则：深度分析 Fiber 节点从 alternate 到 workInProgress 的内存地址拷贝过程

各位同学好，欢迎来到“React 深度架构解析大讲堂”。我是你们那个总是熬夜修 Bug、头发却依然茂密的资深编程专家。

今天我们不聊 useEffect 怎么写才不报错，也不聊 useMemo 到底省不省电。今天，我们要把 React 的内裤扒开，看看它底裤下面——也就是那个被称为 Fiber 架构 的核心机密。

我们要探讨的主题是：React 节点复用判定准则，以及 Fiber 节点从 alternate 到 workInProgress 的内存地址“拷贝”（更准确说是指针交换）过程。

这听起来很枯燥对吧？别急，这就像是侦探小说里的“身份互换”桥段。你准备好你的内存条了吗？我们要开始“挖矿”了。

---

第一部分：React 的“便秘”与“换血”哲学

在 React 16 之前，React 的渲染模式就像是一个暴脾气的大力士。你点一下按钮，它就把你所有的 DOM 节点全部删掉，然后在内存里重新生成一套全新的。这个过程叫“全量更新”。

这就好比你装修房子，你不想把墙拆了重砌，你只是想换个壁纸。但 React 以前的做法是：直接把房子炸了，再盖一栋一模一样的。

结果就是：页面卡顿，用户体验极差，浏览器直接给你个白眼。

为了解决这个问题，Facebook 的工程师们决定给 React 来个“换血手术”，引入了 Fiber。Fiber 是什么？它不是一种新的框架，它是一种数据结构，也是一种调度算法。

Fiber 的核心思想是：增量渲染。它把那栋“整栋楼”的渲染任务，拆解成一个个小的“砖块”。渲染的时候，如果遇到复杂任务，Fiber 就会停下来，喘口气，把控制权交还给浏览器，让浏览器先画一帧。等浏览器忙完了，React 再接着画。

那么，谁来管理这些“砖块”呢？就是 Fiber 节点。

---

第二部分：Fiber 节点的“身份证”与“双胞胎”理论

在 React 的世界里，每一个组件、每一个 DOM 节点，在内存里都有一个对应的 Fiber 节点。我们可以把它想象成一个忙碌的工厂工人。

每个 Fiber 节点，都有一套详细的“身份证”信息：

1. type：它是个什么组件？（是 div？是 React.memo？还是函数组件？）
2. key：它的唯一标识符（对于列表渲染至关重要）。
3. stateNode：它对应的真实 DOM 节点。
4. return：它的爸爸是谁。
5. child：它的大孩子是谁。
6. sibling：它的兄弟姐妹是谁。

现在，最关键的问题来了：React 是怎么判断这个 Fiber 节点是不是“老熟人”的？

这里就要祭出我们的主角了：alternate 属性。

什么是 alternate？

在 React 的内存世界里，总是同时存在两棵树。

1. Current Tree（当前树）：这是已经提交到屏幕上、用户正在看的树。它是“过去式”。
2. WorkInProgress Tree（工作树）：这是正在内存里构建、准备渲染的树。它是“未来式”。

当 React 开始渲染下一帧时，它会把 WorkInProgress Tree 当作 Current Tree，然后把原来的 Current Tree 存起来。

而神奇的事情就在这里发生了：每一对对应的 Fiber 节点，都通过 alternate 属性互为“双胞胎”。

// 伪代码展示 Fiber 节点的内部结构
class FiberNode {
  constructor(type, key, ...) {
    this.type = type; // 组件类型
    this.key = key;
    this.stateNode = null; // DOM 节点

    // 指向父节点
    this.return = null;

    // 指向子节点
    this.child = null;

    // 指向兄弟节点
    this.sibling = null;

    // -----------------------
    // 核心机密：Alternate 属性
    // -----------------------
    // 这个属性指向这棵树的“前世”
    this.alternate = null;
  }
}

想象一下，currentNode（旧节点）的 alternate 属性，指向了 workInProgressNode（新节点）。反之亦然。

这就是 React 节点复用的基石！

---

第三部分：复用判定准则——Key 的审判

React 怎么知道该不该复用这个节点？它不能瞎猜。它得用尺子量。

判定准则非常简单粗暴：如果 type（类型）和 key（标识）都一样，那就复用；不一样，就销毁重建。

• Type：决定了它是 DOM 节点还是组件。比如都是 div，那肯定是兄弟。
• Key：决定了它是列表里的第几个。比如 [1, 2, 3] 变成了 [1, 3, 2]。虽然 type 都是数字，但 key 变了，React 就知道这份数据变了，不能复用。

代码示例：复用判定的逻辑

function shouldReuseNode(fiber, currentFiber) {
  // 1. 类型必须一致
  const isSameType = fiber.type === currentFiber.type;

  // 2. Key 必须一致 (Key 是复用的核心)
  const isSameKey = fiber.key === currentFiber.key;

  return isSameType && isSameKey;
}

如果 shouldReuseNode 返回 true，恭喜你，你拿到了复用资格。接下来，就是我们要深入探讨的“内存地址拷贝/交换”过程了。

---

第四部分：从 Alternate 到 WorkInProgress 的“灵魂互换”

这是最精彩的部分。当 React 确定要复用节点时，它不会像傻瓜一样把数据从头到尾拷贝一遍（那样太慢了，而且会丢失 DOM 引用）。它做的是一件极其优雅的事情：指针交换。

这个过程分为两步：创建新节点 和 建立双向链接。

第一步：创建新节点

当 React 开始渲染时，它会创建一个全新的 Fiber 节点，我们称之为 workInProgressFiber。

// 创建一个新的工作节点
const workInProgressFiber = createFiberNode(fiber.type, fiber.key);
// 此时，它的 alternate 还是指向 null

第二步：建立 Alternate 链接（内存地址的“交换”）

这是关键！React 会把 workInProgressFiber 的 alternate 属性，指向它对应的旧节点（currentFiber）。同时，它也会把旧节点的 alternate 属性，指向 workInProgressFiber。

// 1. 新节点指向旧节点
workInProgressFiber.alternate = currentFiber;

// 2. 旧节点指向新节点
currentFiber.alternate = workInProgressFiber;

这就是所谓的“内存地址拷贝过程”吗？
不完全是。这不是数据的深拷贝。这是引用关系的重构。

• workInProgressFiber 不仅仅是复制了数据，它接管了旧节点的所有“工作职责”。
• stateNode（DOM 节点）并没有被拷贝，它直接被复用了。这就是为什么 React 复用节点能极大提高性能的原因——你不用重新创建 DOM 元素，你只是改变了 React 内部对它的管理方式。

形象的比喻：
想象你在玩一个角色扮演游戏。

• currentFiber 是旧的角色卡，上面记录着你的等级、装备。
• workInProgressFiber 是一张新纸，你刚把它填好。
• 但是，你的真实角色（DOM 节点）还在那里。
• React 的操作是：把新纸上的信息覆盖到旧卡上，然后把旧卡的 alternate 属性指向新纸。这样，下次渲染时，React 看到旧卡，就会去新纸那里找最新的逻辑。

---

第五部分：深度剖析协调（Reconciliation）算法

为了让你彻底明白这个过程，我们来模拟一下 React 在渲染一个列表时的内部流程。

假设我们有一个列表：['A', 'B', 'C']。React 需要把这个列表渲染到屏幕上。

场景 1：列表内容不变

1. 初始状态：

   • current 树有一个节点 A，B，C。
   • workInProgress 树是空的。

2. 处理节点 A：

   • React 创建 workInProgressNode_A。
   • 发现 current 也有 A。
   • 判定：类型是 div，Key 是 'A'。匹配！
   • 执行复用：

     // A 的复用过程
     workInProgressNode_A.alternate = currentNode_A;
     currentNode_A.alternate = workInProgressNode_A;

   • 结果：A 节点被复用了。React 只需要更新它的属性，不需要创建新的 DOM。

3. 处理节点 B 和 C：

   • 同理，B 和 C 也被复用。指针交换完成。

场景 2：列表变了（例如：['A', 'D', 'B']）

1. 处理节点 A：

   • workInProgressNode_A 创建。
   • 比对 currentNode_A。
   • 类型和 Key 都匹配。
   • 复用：指针交换。A 还在原来的位置。

2. 处理节点 D：

   • workInProgressNode_D 创建。
   • 比对 currentNode_B（A 的兄弟节点）。
   • 发现 Key 是 'D'，不是 'B'。不匹配！
   • 判定：必须销毁旧的 B，创建新的 D。
   • 执行：

     // D 是新节点，它没有 alternate
     // B 是旧节点，它的 alternate 指向 D
     currentNode_B.alternate = workInProgressNode_D;
     // 标记 B 为删除
     workInProgressNode_D.alternate = null; 

3. 处理节点 B：

   • 现在的 A 的下一个兄弟节点应该是 B。
   • React 发现 workInProgressNode_A 的 child 是 workInProgressNode_D。
   • 它需要找到 B。
   • 它检查 workInProgressNode_D 的 sibling（兄弟节点）。
   • 它发现 workInProgressNode_D 的 sibling 是 null（因为 D 没有兄弟节点，它是新插入的）。
   • 判定：找不到 B 了。
   • 执行：创建 workInProgressNode_B。这次 B 是个新节点，没有 alternate。

场景 3：Key 改变了（致命一击）

假设列表是 ['A', 'B']。React 尝试渲染 ['A', 'B']（完全一样）。

• A 复用。
• B 复用。
• 指针交换。

现在，假设我们渲染 ['A', 'C']。

• A 复用。
• B 和 C 不匹配。B 被删除，C 被创建。

现在，假设我们渲染 ['A', 'B']（又变回来了！）。

• A 复用。
• React 看到列表长度是 2。它去比对 A 的下一个节点。
• 它发现 currentNode_A 的 child 是 currentNode_B。
• 它去比对 workInProgressNode_A 的 child。
• 它发现 workInProgressNode_A 的 child 是 workInProgressNode_C（因为上次渲染剩下了 C）。
• 判定：workInProgressNode_C 的 Key 是 'C'，不是 'B'。不匹配！
• 执行：销毁 C，创建 B。

注意到了吗？ 即使数据没变，只要 Key 的顺序变了，或者 Key 的内容变了，React 就会认为这是一个全新的列表，它必须销毁所有旧节点，重新创建所有新节点。这就是为什么在 React 列表中，Key 的重要性堪比生命。

---

第六部分：内存管理——垃圾回收器在哭泣

现在我们来看看内存。

每次渲染，React 都会创建大量的 workInProgress 节点。如果这些节点一直不回收，内存就会爆炸，浏览器就会卡死。

React 是怎么回收的呢？这就是 Fiber 树的遍历与清理。

1. 渲染阶段：

   • React 不断构建 workInProgress 树。
   • 如果节点被复用（alternate 存在），那么这个节点会被保留在内存中。
   • 如果节点被删除（alternate 为 null），React 会在构建完新树后，把这个节点标记为 Deletion。

2. 提交阶段：

   • 当 workInProgress 树构建完毕，DOM 更新完成。
   • React 会把 workInProgress 树变成 current 树。
   • 关键步骤：React 遍历 current 树，找到那些 alternate 为 null 的节点（也就是之前被标记删除的节点）。
   • 它执行 unmountComponentAtNode，销毁这些节点对应的 DOM，并把这些 Fiber 节点从内存中移除，让垃圾回收器（GC）把它们捡走。

代码示例：标记删除

function reconcileChildren(currentFiber, workInProgressFiber, elements) {
  // elements 是新的 React Element 数组，例如 ['A', 'B']

  let index = 0;
  let lastPlacedNode = null; // 记录上一个节点放置的位置

  while (index < elements.length) {
    const element = elements[index];

    // 1. 检查 currentFiber 是否还有剩余（即 current 树比新元素多，说明多了要删）
    if (currentFiber !== null) {
      // 尝试复用
      if (currentFiber.key === element.key) {
        // 复用逻辑：交换 alternate 指针
        // workInProgressFiber.alternate = currentFiber;
        // currentFiber.alternate = workInProgressFiber;

        // 继续处理子节点
        workInProgressFiber = reconcileChildren(
          currentFiber, 
          workInProgressFiber, 
          element.props.children
        );
        currentFiber = currentFiber.sibling;
      } else {
        // Key 不匹配，标记当前 currentFiber 为删除
        // 我们把它的 alternate 设为 null，这样下次提交阶段就知道它是垃圾了
        deleteSubtree(currentFiber);
        // 继续找下一个 currentFiber
        currentFiber = currentFiber.sibling;
      }
    }

    // 2. 如果 currentFiber 用完了，或者上面的复用失败了，创建新节点
    if (currentFiber === null) {
      const newFiber = createFiberFromElement(element);
      // 新节点的 alternate 是 null，意味着它是全新的
      if (lastPlacedNode === null) {
        workInProgressFiber.child = newFiber;
      } else {
        lastPlacedNode.sibling = newFiber;
      }
      lastPlacedNode = newFiber;
    }

    index++;
  }

  // 3. 循环结束，如果 currentFiber 还有剩余，全部删除
  if (currentFiber !== null) {
    deleteRemainingChildren(currentFiber);
  }

  return workInProgressFiber;
}

---

第七部分：深入理解 workInProgress 的“身份”

很多同学会有个误区，以为 workInProgress 就是一个全新的对象。其实，workInProgress 往往就是 current 的一个“变身版”。

在 React 的内部逻辑中，你经常能看到这样的代码：

function updateFunctionComponent(current, workInProgress, Component, props) {
  // 1. 准备新的 props
  const nextProps = props;

  // 2. 如果 current 存在，说明是更新；如果不存在，说明是挂载
  if (current !== null) {
    // 复用逻辑：拷贝 props，更新 state 等
    workInProgress.memoizedProps = nextProps;
    workInProgress.memoizedState = current.memoizedState;
  } else {
    workInProgress.memoizedProps = nextProps;
    workInProgress.memoizedState = null;
  }

  // 3. 执行组件函数
  const children = Component(props, context);

  // 4. 处理返回的 children
  reconcileChildren(current, workInProgress, children);
}

注意看这里的 workInProgress。它其实是在复用 current 的内存地址（或者说，它在同一个对象实例上不断修改属性）。

为什么这样设计？
因为 React 需要保留 current 节点的状态。比如，你点击了一个按钮，状态改变了。React 需要保留上一次的状态，才能计算出新的状态。如果每次都创建新节点，状态就丢了。

所以，Fiber 节点的复用，本质上是一种“原地更新”与“全新创建”的混合体。

• DOM 节点（stateNode）：必须是复用的，不能销毁重绘。
• Fiber 节点（对象实例）：可以是复用的（指针交换），也可以是新建的。
• 数据（props, state）：从 current 拷贝到 workInProgress。

---

第八部分：实战演练——手写一个微型 Fiber 协调器

为了让你彻底理解，我们写一个超级简化的版本。这个版本不涉及调度、不涉及优先级，只专注于“复用判定”和“Alternate 交换”。

// 1. 定义 Fiber 节点类
class FiberNode {
  constructor(type, key) {
    this.type = type;
    this.key = key;
    this.stateNode = null; // 模拟 DOM 节点
    this.return = null;
    this.child = null;
    this.sibling = null;
    this.alternate = null; // 核心属性
  }
}

// 2. 模拟创建节点
function createFiber(type, key) {
  return new FiberNode(type, key);
}

// 3. 核心复用逻辑
function reconcile(currentFiber, workInProgressFiber, element) {
  if (!currentFiber) {
    // 情况 A：Current 是空的，必须创建新的
    const newNode = createFiber(element.type, element.key);
    newNode.stateNode = element.type; // 假设 type 就是 DOM 标签
    workInProgressFiber.child = newNode;
    return newNode;
  }

  // 情况 B：Current 存在，尝试复用
  if (currentFiber.key === element.key && currentFiber.type === element.type) {
    // -----------------------
    // 关键时刻：Alternate 指针交换
    // -----------------------
    console.log(`复用节点: ${currentFiber.type}`);

    // 1. 新节点指向旧节点
    workInProgressFiber.alternate = currentFiber;

    // 2. 旧节点指向新节点
    currentFiber.alternate = workInProgressFiber;

    // 3. 继续递归处理子节点
    // 注意：这里简化了，实际 React 会处理兄弟节点
    const newChild = reconcile(
      currentFiber.child, 
      workInProgressFiber.child, 
      element.props.children
    );

    // 更新指针
    workInProgressFiber.child = newChild;
    return newChild;
  } else {
    // 情况 C：不匹配，标记删除（这里简化为不处理，实际会置 null）
    console.log(`销毁节点: ${currentFiber.type}`);
    // 销毁逻辑：currentFiber.alternate = null;
    // 或者直接跳过，让 GC 回收
    return null;
  }
}

// 4. 测试场景
// 假设这是上一次渲染的结果 (Current Tree)
const currentA = createFiber('div', 'A');
const currentB = createFiber('div', 'B');
const currentC = createFiber('div', 'C');

currentA.child = currentB;
currentB.sibling = currentC;
currentB.return = currentA;
currentC.return = currentB;

// 假设这是本次渲染的入口 (WorkInProgress Tree)
const workInProgressRoot = createFiber('div', null);

// 执行渲染
console.log("--- 开始渲染 ['A', 'D', 'B'] ---");

// 渲染 A
const wA = reconcile(currentA, workInProgressRoot, { type: 'div', key: 'A', props: {} });
workInProgressRoot.child = wA;

// 渲染 D (currentA 的 child 是 B，不匹配 D)
// 在真实 React 中，这里会断开 A 的 child，然后创建 D
const wD = reconcile(currentA.child, wA, { type: 'div', key: 'D', props: {} });
wA.child = wD;

// 渲染 B (currentA.child.sibling 是 C，不匹配 B)
// 在真实 React 中，这里会断开 D 的 sibling，然后创建 B
const wB = reconcile(currentA.child.sibling, wD, { type: 'div', key: 'B', props: {} });
wD.sibling = wB;

console.log("--- 渲染结束 ---");

// 验证：此时 currentA.alternate 应该指向 wA
console.log(`Current A's alternate type: ${currentA.alternate.type}`); // div
console.log(`WorkInProgress A's alternate type: ${wA.alternate.type}`); // div

// 验证：Current B 的 alternate 应该是 null (被销毁了)
console.log(`Current B's alternate type: ${currentB.alternate ? currentB.alternate.type : 'null'}`); // null

这段代码虽然简陋，但它完美展示了Alternate 指针交换的过程。你看到了吗？当 reconcile 判断可以复用时，它并没有创建新对象，而是把旧对象的 alternate 属性指向了新对象，把新对象的 alternate 属性指向了旧对象。这就是内存地址“拷贝”的真相——拷贝的是引用，交换的是身份。

---

第九部分：性能优化的终极奥义

理解了 alternate 和 workInProgress 的关系，你就理解了 React 性能优化的核心。

1. 避免不必要的重渲染：

   • 如果父组件更新了，但子组件的 type 和 key 没变，React 就会复用子组件的 Fiber 节点。
   • 这意味着子组件的 useEffect 不会重复触发（除非依赖项变了）。
   • 这意味着子组件的 memoizedState（状态）会被保留。

2. Key 的艺术：

   • 列表渲染时，Key 是最敏感的。
   • 如果你用 index 作为 Key，当列表顺序改变时，React 会认为所有元素都变了，导致所有节点都被销毁重建。这是性能杀手。
   • 如果你用唯一的 id 作为 Key，React 就能完美地识别出“A 还是 A”，“B 还是 B”，从而实现极致的复用。

3. 函数组件的优化：

   • React.memo 本质上就是帮我们做了一次 type 和 key 的比对，如果相同，就复用 Fiber 节点，不执行函数体。

---

第十部分：总结与展望

好了，同学们，今天的“Fiber 节点复用判定准则”深度解析就到这里。

我们回顾一下今天的关键知识点：

1. Fiber 节点是 React 渲染的原子单位。
2. Alternate 属性是连接当前树（旧）和工作树（新）的桥梁。
3. 复用判定基于 type 和 key 的匹配。
4. 复用过程不是深拷贝数据，而是指针交换。workInProgress.alternate = current，current.alternate = workInProgress。
5. 这种机制保证了 DOM 节点的高效复用，同时允许 React 进行增量渲染。

React 的这种设计非常精妙，它就像一个高明的魔术师。表面上，DOM 节点消失了又出现，实际上，它们只是换了个马甲，躲在 Fiber 的 Alternate 属性后面，静静地看着你。

当你下次写代码时，遇到性能瓶颈，或者看着控制台报错，记得想想那个 alternate 指针。它是 React 内存管理的守护神，也是你优化性能的利器。

最后，记住一句话：在 React 的世界里，复用就是正义，指针交换就是真理。

下课！记得去给你们的内存条擦擦灰，别让 GC 哭了！