重新探讨React Diff算法

重新探讨一下 React DOM Diff 的原理。需要强调的是，直接分析 React 完整的、当前版本的 Diff 源码并逐行解释，不仅极其复杂（涉及 Fiber 架构、调度、优先级等众多概念），而且代码量远超几千行，并且在一个回答中完整呈现并解释是不现实的。

但是，我们可以深入理解其核心原理、启发式策略、不同场景下的处理逻辑 ，并通过简化和概念性的代码示例来模拟其行为，让你对 Diff 过程有非常清晰和深入的认识。这比直接贴上难以理解的源码片段更有助于学习。

我们将遵循 React Diff 算法的核心思想进行讲解，主要基于经典的 Reconciliation 算法（Fiber 架构是其实现方式的进化，但核心 Diff 策略思想一脉相承）。

核心目标： React 需要高效地将 Virtual DOM 的变化更新到真实的 DOM 上。直接替换整个 DOM 会非常昂贵，因此需要找出最小的变更集（创建、更新、删除、移动节点）。这个找出变更集的过程就是 Reconciliation（协调），其核心就是 Diff 算法。

React Diff 的基石：虚拟 DOM (Virtual DOM)

在深入 Diff 之前，必须理解 Virtual DOM。

是什么？ Virtual DOM 是一个用 JavaScript 对象（Plain Old JavaScript Object, POJO）来描述真实 DOM 结构和属性的树状结构。它存在于内存中。
为什么需要？
- 性能： 直接操作真实 DOM 通常很慢，因为它涉及浏览器的渲染引擎、布局计算、重绘等复杂过程。而操作内存中的 JavaScript 对象非常快。
- 抽象： Virtual DOM 提供了一个抽象层，使得 React 可以在不同环境（如浏览器 DOM、Native）中渲染，开发者只需关注 UI 的状态和结构。
- 批量更新： React 可以累积多次状态变更，计算出最终的 VDOM，然后进行一次 Diff 和 DOM 更新，减少不必要的 DOM 操作。

一个简单的 VDOM 示例：

JavaScript 复制代码

// JSX:
// <div className="container">
//   <h1>Hello</h1>
//   <p>World</p>
// </div>

// Corresponding Virtual DOM (Simplified):
const vdom = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: {
          children: 'Hello'
        }
      },
      {
        type: 'p',
        props: {
          children: 'World'
        }
      }
    ]
  },
  // key: null, // key 在列表 Diff 中很重要
  // ref: null,
  // ... 其他内部属性
};

React Diff 算法的两个核心启发式策略 (Heuristics)

传统的树 Diff 算法（比如找出两棵任意树的最小编辑距离）复杂度通常是 O(n3)，其中 n 是树中节点的数量。这对于大型 Web 应用来说是无法接受的。React 团队基于 Web UI 的特点，提出了两个假设（启发式策略） ，将复杂度优化到了 O(n)：

不同类型的元素会产生不同的子树 (Different Types Generate Different Subtrees):
- 如果两个元素的 type 不同（比如从 <div> 变成 <span>，或者从 MyComponent 变成 YourComponent），React 不会尝试去比较它们的具体内容和结构，而是直接认为这是一个完全不同的东西。
- 行为： React 会销毁（卸载）旧的节点及其所有子孙节点，然后创建并插入全新的节点及其子孙节点。
- 理由： 跨组件类型或跨原生元素类型进行复用的可能性很小，或者说尝试复用的成本可能比直接重建更高。
开发者可以通过 key 属性来暗示哪些子元素在不同的渲染下能保持稳定 (Stable Keys for Stable Elements):
- 在处理一个列表（数组形式的子节点）时，比如 <ul> 下的多个 <li>，默认情况下 React 会按顺序进行 Diff。如果在列表开头插入一个元素，它会认为所有后续元素都发生了变化，导致大量不必要的 DOM 更新。
- 行为： 通过给列表中的每个子元素添加一个唯一且稳定 的 key 属性，React 就能精确地识别出哪些元素是新增的、哪些是删除的、哪些是移动的，以及哪些是仅仅内容或属性变化需要更新的。
- 理由： key 提供了一个身份标识，让 React 能够跨越不同的渲染批次追踪同一个元素实例。

基于这两个策略，我们来详细看 Diff 的过程。

Diff 算法详解

React 的 Diff 操作发生在组件的 render 函数被调用后，生成了新的 Virtual DOM 树。然后，React 会将这棵新树与上一次渲染生成的旧树（在 Fiber 架构中称为 current 树）进行比较。比较从根节点开始，逐层进行。

函数 diff(oldNode, newNode) (概念性)

这个函数是 Diff 的入口点，比较两个 VDOM 节点。

JavaScript 复制代码

/**
 * 比较新旧两个 VDOM 节点，找出差异并应用更新
 * @param {Fiber | null} oldNode 旧的 VDOM 节点 (或 Fiber 节点)
 * @param {ReactElement} newNode 新的 React Element (描述 VDOM)
 * @param {DOMElement | null} parentDOMElement 父级真实 DOM 节点，用于插入新节点
 * @returns {Fiber | null} 返回新创建或复用的 Fiber 节点
 */
function diff(oldNode, newNode, parentDOMElement) {
  console.log("Comparing:", oldNode ? oldNode.type : 'null', 'vs', newNode ? newNode.type : 'null');

  // 1. 处理 newNode 不存在的情况 (节点被删除)
  if (newNode === null || newNode === undefined || typeof newNode === 'boolean') {
    if (oldNode !== null) {
      // 旧节点存在，新节点没了 -> 标记为删除
      markNodeForDeletion(oldNode); // 实际操作会在 commit 阶段执行 unmount 和 DOM 移除
    }
    return null; // 没有新节点生成
  }

  // 处理文本节点 (简单比较值)
  if (typeof newNode === 'string' || typeof newNode === 'number') {
    if (oldNode !== null && (typeof oldNode.elementType === 'string' || typeof oldNode.elementType === 'number') && oldNode.stateNode) { // 假设 oldNode 有 stateNode 指向真实 DOM
      // 旧节点也是文本节点，直接更新内容
      if (oldNode.pendingProps !== newNode) { // 用 pendingProps 或类似属性存 VDOM 值
         console.log(`Updating text from "${oldNode.pendingProps}" to "${newNode}"`);
         oldNode.stateNode.nodeValue = newNode; // 直接更新真实 DOM
         oldNode.pendingProps = newNode; // 更新 Fiber 节点上的值
         markNodeForUpdate(oldNode); // 标记更新（虽然已直接更新，但标记可能用于其他逻辑）
      }
      return oldNode; // 复用旧节点
    } else {
      // 旧节点不是文本节点，或者不存在 -> 创建新的文本节点
      if (oldNode !== null) {
        markNodeForDeletion(oldNode); // 删除旧节点
      }
      const newTextNode = createTextNode(newNode, parentDOMElement); // 创建真实 Text Node
      const newFiber = createFiberForText(newNode, newTextNode); // 创建对应的 Fiber 节点
      markNodeForPlacement(newFiber); // 标记插入
      console.log(`Placing new text node: "${newNode}"`);
      return newFiber;
    }
  }

  // 2. 处理 oldNode 不存在的情况 (节点是新增的)
  if (oldNode === null) {
    // 旧的不存在，新节点存在 -> 创建并标记插入
    const newFiber = createFiberFromElement(newNode);
    const newDOMElement = createDOMElement(newFiber); // 根据 Fiber 信息创建真实 DOM
    newFiber.stateNode = newDOMElement; // Fiber 指向真实 DOM
    reconcileChildren(null, newFiber, newNode.props.children, newDOMElement); // 递归处理子节点 (因为是全新创建)
    markNodeForPlacement(newFiber); // 标记插入
    console.log(`Placing new element: <${newNode.type}>`);
    return newFiber;
  }

  // 3. 核心策略 1：比较节点类型 `type`
  //    注意：在 Fiber 中，比较的是 oldFiber.type 和 newElement.type
  if (oldNode.type !== newNode.type) {
     console.log(`Type mismatch: ${oldNode.type} vs ${newNode.type}. Replacing node.`);
    // 类型不同，销毁旧节点，创建新节点
    markNodeForDeletion(oldNode); // 标记删除旧节点及其子树

    const newFiber = createFiberFromElement(newNode);
    const newDOMElement = createDOMElement(newFiber);
    newFiber.stateNode = newDOMElement;
    reconcileChildren(null, newFiber, newNode.props.children, newDOMElement); // 全新处理子节点
    markNodeForPlacement(newFiber); // 标记插入新节点
    return newFiber;
  }

  // 4. 类型相同，进行更细致的比较
  console.log(`Types match: ${newNode.type}. Reusing node.`);
  // 复用旧的 Fiber 节点作为基础，创建 WorkInProgress Fiber
  const workInProgressFiber = reuseFiber(oldNode, newNode.props);
  workInProgressFiber.stateNode = oldNode.stateNode; // 复用真实 DOM 引用

  // 4.1 如果是 DOM 元素 (e.g., 'div', 'span')
  if (typeof newNode.type === 'string') {
    // 更新属性 (Attributes and Styles)
    updateDOMProperties(oldNode.stateNode, oldNode.memoizedProps, newNode.props); // memoizedProps 存旧属性
    workInProgressFiber.memoizedProps = newNode.props; // 更新 Fiber 上的属性记录

    // 递归 Diff 子节点
    reconcileChildren(oldNode, workInProgressFiber, newNode.props.children, oldNode.stateNode);

    markNodeForUpdate(workInProgressFiber); // 标记需要更新（即使只是子节点变化）
    return workInProgressFiber;
  }

  // 4.2 如果是组件元素 (Class Component or Function Component)
  if (typeof newNode.type === 'function') {
    // 对于组件，需要调用其 render 方法 (或函数本身) 获取子 VDOM，然后 Diff 子 VDOM
    // 这一步在 Fiber 中会涉及到调用生命周期、更新 state/props 等
    // 这里简化处理：假设组件更新逻辑产生新的 children VDOM
    console.log(`Diffing component: ${newNode.type.name || 'FunctionComponent'}`);

    // 实际 React 会运行组件更新逻辑 (shouldComponentUpdate, render 等)
    // 假设 updateComponent 返回了新的子元素 VDOM
    const newChildren = updateComponentAndGetChildren(workInProgressFiber, newNode);

    // 递归 Diff 子节点 (组件 render 返回的结果)
    reconcileChildren(oldNode, workInProgressFiber, newChildren, oldNode.stateNode); // 注意：组件的 stateNode 可能不是 DOM 节点

    markNodeForUpdate(workInProgressFiber);
    return workInProgressFiber;
  }

  // 其他情况 (Fragment, Portal etc.) - 省略

  return workInProgressFiber; // 返回处理后的 Fiber 节点
}

// --- 以下是辅助函数 (概念性，非 React 源码) ---

// 标记节点及其子树需要被删除
function markNodeForDeletion(fiber) {
  console.log(`Marking <${fiber.type}> and its children for DELETION`);
  fiber.effectTag = 'Deletion';
  // 实际需要遍历子孙，都标记删除
}

// 标记节点需要被插入到 DOM 中
function markNodeForPlacement(fiber) {
  console.log(`Marking <${fiber.type}> for PLACEMENT`);
  fiber.effectTag = 'Placement';
}

// 标记节点需要更新 (属性或子节点可能变化)
function markNodeForUpdate(fiber) {
  console.log(`Marking <${fiber.type}> for UPDATE`);
  fiber.effectTag = 'Update';
}

// 创建文本节点的真实 DOM
function createTextNode(text, parentDOMElement) {
  console.log(`Creating text node: "${text}"`);
  // return document.createTextNode(text); // 实际创建
  return { nodeType: 3, nodeValue: text, _parentElement: parentDOMElement }; // 模拟 DOM 节点
}

// 创建元素的真实 DOM
function createDOMElement(fiber) {
  console.log(`Creating DOM element: <${fiber.type}>`);
  // const dom = document.createElement(fiber.type);
  // updateDOMProperties(dom, {}, fiber.pendingProps); // 设置初始属性
  // return dom; // 实际创建
  return { nodeType: 1, tagName: fiber.type.toUpperCase(), props: { ...fiber.pendingProps }, children: [], _parentElement: null, _fiber: fiber }; // 模拟 DOM 节点
}

// 更新 DOM 元素的属性和样式
function updateDOMProperties(domElement, oldProps, newProps) {
  oldProps = oldProps || {};
  newProps = newProps || {};
  let changed = false;

  // 移除旧的有，新的没有的属性
  for (const propKey in oldProps) {
    if (propKey !== 'children' && !(propKey in newProps)) {
      console.log(`  - Removing prop: ${propKey}`);
      // domElement.removeAttribute(propKey); // 实际操作
      delete domElement.props[propKey]; // 模拟
      changed = true;
    }
  }

  // 添加或更新属性
  for (const propKey in newProps) {
    if (propKey !== 'children') {
      if (oldProps[propKey] !== newProps[propKey]) {
        console.log(`  - Updating prop: ${propKey} from "${oldProps[propKey]}" to "${newProps[propKey]}"`);
        // domElement.setAttribute(propKey, newProps[propKey]); // 实际操作 (需要处理 style, event listeners 等特殊情况)
        domElement.props[propKey] = newProps[propKey]; // 模拟
        changed = true;
      }
    }
  }
  if (changed) {
      console.log(`Properties updated for <${domElement.tagName}>`);
  } else {
      console.log(`Properties for <${domElement.tagName}> remain unchanged.`);
  }
}

// 假设的组件更新逻辑 (简化)
function updateComponentAndGetChildren(fiber, element) {
    // 实际 React 会调用生命周期，更新 state/props, 然后调用 render()
    console.log(`Updating component ${fiber.type.name || 'FunctionComponent'}, getting new children`);
    // 假设 render() 返回 element.props.children
    return element.props.children;
}

// 创建 Fiber 节点的简化函数
function createFiberFromElement(element) {
    return {
        type: element.type,
        key: element.key,
        pendingProps: element.props,
        memoizedProps: {}, // 旧属性
        stateNode: null,   // 指向真实 DOM 或组件实例
        return: null,      // 父 Fiber
        sibling: null,     // 兄弟 Fiber
        child: null,       // 第一个子 Fiber
        effectTag: null    // 副作用标记 (Placement, Update, Deletion)
    };
}
function createFiberForText(text, domNode) {
     return {
        type: null, // 文本节点类型特殊表示，或直接用 'TEXT_NODE'
        elementType: text, // 存储文本内容
        key: null,
        pendingProps: text,
        memoizedProps: null,
        stateNode: domNode,
        effectTag: null
    };
}

// 复用旧 Fiber 节点
function reuseFiber(oldFiber, newProps) {
    const newFiber = { ...oldFiber }; // 浅拷贝
    newFiber.pendingProps = newProps;
    newFiber.effectTag = null; // 清除旧标记
    newFiber.child = null;
    newFiber.sibling = null;
    // ... 清理或重置其他可能需要更新的字段
    return newFiber;
}

核心策略 2 的体现：reconcileChildren (子节点 Diff)

这是 Diff 中最复杂的部分，尤其是处理列表（数组）时。

JavaScript 复制代码

/**
 * 协调子节点
 * @param {Fiber | null} currentParentFiber 旧的父 Fiber
 * @param {Fiber} workInProgressParentFiber 当前正在构建的父 Fiber
 * @param {Array | Object | string | number | null} newChildren 新的子 VDOM (可能是单个节点，也可能是数组)
 * @param {DOMElement} parentDOMElement 父真实 DOM 节点
 */
function reconcileChildren(currentParentFiber, workInProgressParentFiber, newChildren, parentDOMElement) {
    console.log(`Reconciling children for <${workInProgressParentFiber.type || 'Component'}>`);

    if (typeof newChildren === 'string' || typeof newChildren === 'number') {
        // 单个文本子节点
        reconcileSingleTextNode(currentParentFiber, workInProgressParentFiber, newChildren, parentDOMElement);
        return;
    }

    if (typeof newChildren === 'object' && newChildren !== null && typeof newChildren.type !== 'undefined') {
        // 单个元素子节点
        reconcileSingleElement(currentParentFiber, workInProgressParentFiber, newChildren, parentDOMElement);
        return;
    }

    if (Array.isArray(newChildren)) {
        // 多个子节点（数组）-> 这是最关键的部分，需要用到 key
        reconcileChildrenArray(currentParentFiber, workInProgressParentFiber, newChildren, parentDOMElement);
        return;
    }

    if (newChildren === null || newChildren === undefined) {
        // 没有子节点了，需要删除所有旧的子节点
        deleteRemainingChildren(currentParentFiber, workInProgressParentFiber);
        return;
    }

    // 其他情况 (e.g., Iterables) 省略
    console.warn("Unsupported children type:", newChildren);
}

// --- 子节点协调的辅助函数 (概念性) ---

function reconcileSingleTextNode(currentParentFiber, workInProgressParentFiber, textContent) {
    // 尝试复用旧的第一个子节点（如果是文本节点）
    const currentFirstChild = currentParentFiber ? currentParentFiber.child : null;
    if (currentFirstChild && currentFirstChild.stateNode && currentFirstChild.stateNode.nodeType === 3) { // 假设是文本节点
        if (currentFirstChild.pendingProps !== textContent) {
             console.log(`Updating single text child from "${currentFirstChild.pendingProps}" to "${textContent}"`);
             currentFirstChild.stateNode.nodeValue = textContent;
             currentFirstChild.pendingProps = textContent;
             markNodeForUpdate(currentFirstChild);
        } else {
            console.log(`Single text child "${textContent}" unchanged.`);
        }
        // 复用旧 Fiber，但可能需要创建一个新的 workInProgress Fiber
        workInProgressParentFiber.child = reuseFiber(currentFirstChild, textContent);
        // 删除旧的其他兄弟节点 (如果有的话)
        deleteRemainingChildren(currentFirstChild.sibling, workInProgressParentFiber);
    } else {
        // 创建新的文本节点
        console.log(`Placing new single text child: "${textContent}"`);
        const newDOM = createTextNode(textContent, null); // 父 DOM 在 commit 阶段关联
        const newFiber = createFiberForText(textContent, newDOM);
        workInProgressParentFiber.child = newFiber;
        markNodeForPlacement(newFiber);
        // 删除所有旧的子节点
        deleteRemainingChildren(currentFirstChild, workInProgressParentFiber);
    }
}

function reconcileSingleElement(currentParentFiber, workInProgressParentFiber, element) {
     const currentFirstChild = currentParentFiber ? currentParentFiber.child : null;
     const newFiber = diff(currentFirstChild, element, null); // 调用主 diff 函数比较
     if (newFiber) {
         workInProgressParentFiber.child = newFiber; // 关联父子关系
         newFiber.return = workInProgressParentFiber;
         // 删除旧的其他兄弟节点
         if (currentFirstChild && newFiber !== currentFirstChild) {
             deleteRemainingChildren(currentFirstChild.sibling, workInProgressParentFiber);
         } else if (!currentFirstChild){
             // 如果之前就没有 child，那么第一个 newFiber 就是 Placement
             // diff 内部会处理 Placement 标记
         } else {
            // 复用了第一个 child，删除它后面的兄弟
            deleteRemainingChildren(currentFirstChild.sibling, workInProgressParentFiber);
         }
     } else {
         // 新的 element 是 null 或 diff 返回 null (表示删除)
         deleteRemainingChildren(currentFirstChild, workInProgressParentFiber);
     }
}

function deleteRemainingChildren(currentFiber, workInProgressParentFiber) {
    let childToDelete = currentFiber;
    while(childToDelete !== null) {
        markNodeForDeletion(childToDelete);
        childToDelete = childToDelete.sibling;
    }
    // 实际 React 会将这些 Deletion effect 链接起来
}

/**
 * 核心：处理子节点数组 Diff (Key 的作用在此体现)
 * 这是 React Diff 算法中最精妙也最能体现 Key 重要性的地方。
 * React 的实际实现比这个复杂得多，包含多轮遍历和优化，这里展示基本思路。
 */
function reconcileChildrenArray(currentParentFiber, workInProgressParentFiber, newChildren, parentDOMElement) {
    console.log(`Reconciling children array (length: ${newChildren.length})`);

    let oldFiber = currentParentFiber ? currentParentFiber.child : null; // 旧 Fiber 链表的头节点
    let previousNewFiber = null; // 上一个处理的新 Fiber，用于链接 sibling
    let newIdx = 0; // 当前处理的新子节点数组的索引
    let lastPlacedIndex = 0; // 旧链表中最后一个被复用且确定位置的节点的索引
    let nextOldFiber = null; // 临时保存下一个旧 Fiber

    // --- 第一轮遍历：尝试按顺序复用 ---
    // 尽可能地按顺序比较新旧子节点，处理更新和 key/type 变化
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
        const newChild = newChildren[newIdx];
        if (newChild === null || typeof newChild !== 'object') {
             console.log(`Skipping null/primitive new child at index ${newIdx}`);
             continue; // 跳过无效的新节点，但在实际中可能需要特殊处理占位
        }

        // 检查 key 是否匹配
        if (oldFiber.key === newChild.key) {
            nextOldFiber = oldFiber.sibling; // 先保存下一个旧节点
            // Key 相同，检查类型是否相同
            if (oldFiber.type === newChild.type) {
                console.log(`Key and type match (${newChild.key || `index ${newIdx}`}/${newChild.type}). Reusing.`);
                // 类型也相同，可以复用，进行 Diff
                const newFiber = reuseFiber(oldFiber, newChild.props);
                newFiber.return = workInProgressParentFiber;
                newFiber.stateNode = oldFiber.stateNode; // 复用 DOM

                // 递归地对这个节点的子节点进行 Diff
                diff(oldFiber, newChild, parentDOMElement); // 注意：这里简化了，实际是递归调用 reconcileChildren

                // 处理节点移动：如果当前复用的旧节点在旧列表中的位置 < lastPlacedIndex，说明它需要向右移动
                if (oldFiber.index < lastPlacedIndex) {
                    console.log(`Marking <${newFiber.type} key=${newFiber.key}> for PLACEMENT (moved right).`);
                    newFiber.effectTag = 'Placement';
                } else {
                    lastPlacedIndex = oldFiber.index;
                }

                // 链接兄弟节点
                if (previousNewFiber === null) {
                    workInProgressParentFiber.child = newFiber; // 第一个子节点
                } else {
                    previousNewFiber.sibling = newFiber;
                }
                previousNewFiber = newFiber;

            } else {
                 console.log(`Key matches (${newChild.key}) but type differs (${oldFiber.type} vs ${newChild.type}). Replacing.`);
                // Key 相同但类型不同，无法复用，标记旧的删除，跳出第一轮
                 markNodeForDeletion(oldFiber);
                 // 注意：这里应该跳出第一轮，因为顺序被打断了
                 // 为了简化，我们假设直接处理下一个 newChild，但会丢失对后续 oldFiber 的复用机会
                 // 实际 React 会更复杂地处理这种情况
                 break; // 跳出第一轮循环
            }
            oldFiber = nextOldFiber; // 移动到下一个旧节点
        } else {
            console.log(`Keys mismatch at index ${newIdx} (old: ${oldFiber.key}, new: ${newChild.key}). Stopping sequential reuse.`);
            // Key 不同，顺序复用中断，跳出第一轮
            break;
        }
    }

    // --- 处理剩余节点 ---

    // 情况 1: 新节点列表已遍历完，但旧 Fiber 链表还有剩余 -> 删除剩余旧节点
    if (newIdx === newChildren.length) {
        console.log("New children exhausted. Deleting remaining old children.");
        deleteRemainingChildren(oldFiber, workInProgressParentFiber);
        return;
    }

    // 情况 2: 旧 Fiber 链表已遍历完，但新节点列表还有剩余 -> 创建并插入剩余新节点
    if (oldFiber === null) {
        console.log("Old children exhausted. Placing remaining new children.");
        for (; newIdx < newChildren.length; newIdx++) {
             const newChild = newChildren[newIdx];
             if (newChild === null || typeof newChild !== 'object') continue;

             const newFiber = createFiberFromElement(newChild);
             const newDOM = createDOMElement(newFiber); // 创建 DOM
             newFiber.stateNode = newDOM;
             newFiber.return = workInProgressParentFiber;
             markNodeForPlacement(newFiber); // 标记插入

             // 递归其子节点
             reconcileChildren(null, newFiber, newChild.props.children, newDOM);

             // 链接兄弟
             if (previousNewFiber === null) {
                 workInProgressParentFiber.child = newFiber;
             } else {
                 previousNewFiber.sibling = newFiber;
             }
             previousNewFiber = newFiber;
        }
        return;
    }

    // --- 第二轮遍历：处理乱序、插入、删除 (最复杂的部分) ---
    // 将剩余的旧 Fiber 放入 Map 中，用 Key 快速查找
    const existingChildren = mapRemainingOldChildren(oldFiber);
    console.log("Entering non-sequential reconciliation. Remaining old children map:", Array.from(existingChildren.keys()));

    for (; newIdx < newChildren.length; newIdx++) {
        const newChild = newChildren[newIdx];
        if (newChild === null || typeof newChild !== 'object') continue;

        // 尝试用 Key 从 Map 中查找可复用的旧 Fiber
        const matchedOldFiber = existingChildren.get(newChild.key === null ? undefined : newChild.key);

        if (matchedOldFiber) {
            console.log(`Found matching old fiber for key "${newChild.key}" via map.`);
            existingChildren.delete(newChild.key === null ? undefined : newChild.key); // 从 Map 中移除，表示已处理

            // 检查类型是否匹配
            if (matchedOldFiber.type === newChild.type) {
                const newFiber = reuseFiber(matchedOldFiber, newChild.props);
                newFiber.return = workInProgressParentFiber;
                newFiber.stateNode = matchedOldFiber.stateNode; // 复用 DOM

                // 递归 Diff 子节点
                diff(matchedOldFiber, newChild, parentDOMElement); // 简化调用

                // 处理移动
                 if (matchedOldFiber.index < lastPlacedIndex) {
                    console.log(`Marking <${newFiber.type} key=${newFiber.key}> for PLACEMENT (moved right, found via map).`);
                    newFiber.effectTag = 'Placement';
                } else {
                    lastPlacedIndex = matchedOldFiber.index;
                }

                 // 链接兄弟
                 if (previousNewFiber === null) {
                    workInProgressParentFiber.child = newFiber;
                 } else {
                    previousNewFiber.sibling = newFiber;
                 }
                 previousNewFiber = newFiber;

            } else {
                 console.log(`Type mismatch for key "${newChild.key}" (${matchedOldFiber.type} vs ${newChild.type}). Creating new.`);
                 // Key 匹配但类型不匹配 -> 创建新节点，旧节点稍后会被删除（因为它还在 Map 里没被删除，最后会被标记）
                 const newFiber = createFiberFromElement(newChild);
                 const newDOM = createDOMElement(newFiber);
                 newFiber.stateNode = newDOM;
                 newFiber.return = workInProgressParentFiber;
                 markNodeForPlacement(newFiber); // 标记插入
                 reconcileChildren(null, newFiber, newChild.props.children, newDOM); // 处理子节点

                 // 链接兄弟
                 if (previousNewFiber === null) {
                     workInProgressParentFiber.child = newFiber;
                 } else {
                     previousNewFiber.sibling = newFiber;
                 }
                 previousNewFiber = newFiber;
                 // 旧的 matchedOldFiber 留在 Map 中，最后会被删除
            }
        } else {
            console.log(`No matching old fiber found for key "${newChild.key}". Creating new element.`);
            // 在 Map 中找不到 Key 匹配的旧 Fiber -> 创建新节点
            const newFiber = createFiberFromElement(newChild);
            const newDOM = createDOMElement(newFiber);
            newFiber.stateNode = newDOM;
            newFiber.return = workInProgressParentFiber;
            markNodeForPlacement(newFiber); // 标记插入
            reconcileChildren(null, newFiber, newChild.props.children, newDOM);

            // 链接兄弟
            if (previousNewFiber === null) {
                workInProgressParentFiber.child = newFiber;
            } else {
                previousNewFiber.sibling = newFiber;
            }
            previousNewFiber = newFiber;
        }
    }

    // --- 第三步：删除 Map 中剩余的旧节点 ---
    // 遍历完新子节点后，Map 中还存在的旧 Fiber 都是需要删除的
    if (existingChildren.size > 0) {
        console.log(`Deleting ${existingChildren.size} old children that were not matched:`, Array.from(existingChildren.keys()));
        existingChildren.forEach(childToDelete => {
            markNodeForDeletion(childToDelete);
        });
    }
    console.log(`Finished reconciling children array for <${workInProgressParentFiber.type || 'Component'}>`);
}

// 辅助函数：将剩余旧 Fiber 存入 Map
function mapRemainingOldChildren(currentFirstChild) {
    const map = new Map();
    let current = currentFirstChild;
    while (current !== null) {
        // 使用 key 或 index 作为 map 的键
        const key = current.key !== null ? current.key : current.index; // 实际 React 处理 null key 更复杂
        map.set(key, current);
        current = current.sibling;
    }
    return map;
}

关于 Fiber 架构的补充

虽然上面的讲解主要基于经典 Diff 思想，但现代 React 使用 Fiber 架构来实现 Reconciliation。Fiber 并没有改变上述的 Diff 核心策略（比较 type、比较 key），但它改变了执行方式：

可中断与恢复 (Interruptible & Resumable): Fiber 将大的更新任务分解成许多小的工作单元 (Fiber Node) 。React 可以在完成一个单元后检查是否有更高优先级的任务（如用户输入），并暂停当前渲染，稍后再恢复。这使得应用能够保持响应性。
优先级 (Prioritization): 不同更新可以有不同优先级（如动画 > 数据加载）。
异步渲染 (Async Rendering): Fiber 使得并发模式 (Concurrent Mode) 成为可能，React 可以在后台渲染组件树的一部分，而不阻塞主线程。
双缓冲树 (Double Buffering): React 维护两棵 Fiber 树：current 树（当前显示在屏幕上的 UI 对应的树）和 workInProgress 树（正在内存中构建的新树）。Diff 过程实际上是在构建 workInProgress 树时，比较 current Fiber 和新的 React Element 来进行的。
Effect List: Diff 的结果不是直接操作 DOM，而是在 workInProgress Fiber 节点上添加副作用标记 (Effect Tag) ，如 Placement（插入）、Update（更新）、Deletion（删除）。所有带 Effect Tag 的 Fiber 节点会被收集到一个链表 (Effect List) 中。
Commit 阶段: 当 workInProgress 树构建完成（即 Reconciliation 阶段结束），React 进入 Commit 阶段。在这个阶段，React 会一次性地遍历 Effect List，并根据 Effect Tag 执行相应的真实 DOM 操作（或调用 Class 组件的生命周期方法如 componentDidMount, componentDidUpdate, componentWillUnmount）。这个阶段是同步且不可中断的，以保证 UI 的一致性。

总结

React DOM Diff 的核心在于其高效的启发式策略：

不同类型全量替换。
相同类型 DOM 元素比较属性，递归子节点。
相同类型组件元素更新 props/state，调用 render，递归 Diff 结果。
列表 Diff 依赖稳定且唯一的 key 来实现高效的节点复用、移动、增删识别。

虽然我们没有直接逐行分析数千行 React 源码，但通过理解这些核心原理、策略、不同情况的处理逻辑，以及模拟代码的演示，你应该对 React Diff 的工作方式有了深入的了解。Fiber 架构是对这一过程执行方式的重大改进，使其更适应现代 Web 应用对性能和响应性的要求，但 Diff 的比较逻辑基础是相似的。理解 Diff 有助于你编写出性能更好的 React 组件，尤其是在处理列表和条件渲染时，正确使用 key 至关重要。