React Diff

React的协调过程是指在进行组件更新时，通过比较新旧虚拟DOM树的差异，仅对需要更新的部分进行实际的DOM操作。

• 基本策略

  1. 层级一致：只比较同层级的节点，不跨层级比较
  2. 类型一致：节点类型不同时直接销毁重建
  3. key相同：使用 key 标识元素，提高移动识别效率

• 单节点 Diff 规则

  1. key 相同，类型相同：复用节点
  2. key 不同或者类型不同：删除整个旧树，创建新节点

• 多节点 Diff 规则

  1. 第一轮遍历：

     • 按顺序比较新旧节点
     • 节点相同，则复用并更新lastPlacedIndex，遇到不同的节点就停止

  2. 第二轮遍历：

     • 只有新节点：全部插入

     • 只有旧节点：全部删除

     • 都有剩余节点：

       • 用剩余旧节点的 key 生成 map
       • 遍历剩余新节点，从 map 中查找可复用的旧节点
       • 存在可复用的旧节点时，如果旧节点的 oldIndex 小于 lastPlacedIndex ，说明该节点在旧列表中的位置‘相对靠前’需标记移动，否则只更新lastPlacedIndex
       • 不存在可复用的旧节点时，新建节点

  3. 第三轮遍历：

     • 遍历map，删除未被复用的旧节点

  4. 特点：

     • 优先尝试顺序复用，减少移动操作。
     • 通过 lastPlacedIndex 最小化节点移动次数（仅对需要后移的节点标记移动）。
     • lastPlacedIndex 的初始值是 0。它的作用是标记 “最后一个被复用的旧节点在旧列表中的位置索引（oldIndex）”，用于判断后续节点是否需要移动。