Vue DOM diff 的区别？

先纠正之前的一个细节错误：

错：我认为数组存储的是整棵树。

对：其实数组存储的是拥有相同爸爸的一群子节点。

React DOM diff 和 Vue DOM diff 的区别：

1. React 是从左向右遍历对比，Vue 是双端交叉对比。

2. React 需要维护三个变量（有点扯），Vue 则需要维护四个变量。

3. Vue 整体效率比 React 更高，举例说明：假设有 N 个子节点，我们只是把最后子节点移到第一个，那么

   1. React 需要进行借助 Map 进行 key 搜索找到匹配项，然后复用节点

   2. Vue 会发现移动，直接复用节点

附 React DOM diff 代码查看流程：

1. 运行 git clone https://github.com/facebook/react.git

2. 运行 cd react; git switch 17.0.2

3. 用 VSCode 或 WebStorm 打开 react 目录

4. 打开 packages/react-reconciler/src/ReactChildFiber.old.js 第 1274 行查看旧版代码，或打开 packages/react-reconciler/src/ReactChildFiber.new.js 第 1267 行查看新代码（实际上一样）

5. 忽略所有警告和报错，因为 React JS 代码中有不是 JS 的代码

6. 折叠所有代码

7. 根据 React 文档中给出的场景反复在大脑中运行代码

   1. 场景0：单个节点，会运行到 reconcileSingleElement。接下来看多个节点的情况。

   2. 场景1：没 key，标签名变了，最终会走到 createFiberFromElement（存疑）

   3. 场景2：没 key，标签名没变，但是属性变了，最终走到 updateElement 里的 useFiber

   4. 场景3：有 key，key 的顺序没变，最终走到 updateElement

   5. 场景4：有 key，key 的顺序变了，updateSlot 返回 null，最终走到 mapRemainingChildren、updateFromMap 和 updateElement(matchedFiber)，整个过程较长，效率较低

8. 代码查看要点：

   1. 声明不看（用到再看）

   2. if 先不看（但 if else 要看）

   3. 函数调用必看

9. 必备快捷键：折叠所有、展开、向前、向后、查看定义