React19.x 一个示例来看 Diff 算法

setState → scheduleUpdateOnFiber → render 阶段（包含 beginWork → reconcileChildren ← Diff 发生处 → completeWork） → commit 阶段 → DOM mutation。

第一轮遍历（从左到右快速匹配，复杂度 O(n)）： 同时遍历新旧节点数组，尽可能复用 key 和 type 都相同的前缀节点。如果遇到 key 相同但 type 不同的情况，React 会直接丢弃旧节点并基于新的 React Element 生成全新 Fiber（旧节点放入 deletions 数组待删除），但遍历并不会终止------这说明 React 对待"key 相同、类型变了"的策略是继续往后尝试匹配。如果遇到 key 和 type 都不相同的情况，则立即结束遍历。

第二轮遍历（处理边界）：

情况一 ：旧节点有剩余，新节点已遍历完 → 将剩余旧节点标记为 Deletion；
情况二：新节点有剩余，旧节点已遍历完 → 为剩余新节点创建新的 Fiber；

第三轮遍历（处理剩余节点）： 如果第二轮结束后还有新旧节点未被处理，进入第三轮：

两者都有剩余 → 将剩余旧节点按 key 放入 Map，然后遍历剩余新节点，从 Map 中寻找可复用的节点。在这轮遍历中，React 通过维护 lastPlacedIndex（上一个未移动节点在旧数组中的最大索引）来判断节点是否需要移动。

示例

js 复制代码

import { useState } from 'react';

const RenderArray = () => {
  const [array, setArray] = useState<string[]>(['A','B','C','D','E']);

  return (
    <div key="render-array">
      <h1>RenderArray</h1>
      <button onClick={() => setArray(['A','B','E','D','C','F'])}>Set Array</button>
      <ul>
        {array.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};
export default RenderArray;