从节点重排看React 与 Vue3 的 Diff 算法

一个有趣的问题

之前我写了一篇狗教我 React——原理篇之 Diff 算法 - 掘金 (juejin.cn)简单介绍了 diff 算法，收到了一个有意思的疑问：

大佬讲得非常易懂，我有个疑惑就是都说 diff 处理节点前移比较差，比如 a→b→c→d 更新为 d→a→b→c，如果第一遍循环到第一个就截止了，把剩余旧的节点全放入剩余 map 中，第二次遍历不是都可以复用的吗，何来处理差这一说呢

这个问题看似简单，实则涉及到了 React diff 算法的细节，我在评论区简单回复了这个问题，但感觉还是不够详细，所以单独写一篇文章来详细解释一下。

示例中的更新流程是什么样的

首先，我们需要知道，React diff 算法是分两轮进行的，第一轮是处理节点复用，第二轮是处理节点重排。

如上面评论提到，第一次遍历时，第一个节点 key 不同，所以直接跳过，进行第二次遍历。

首先，我们来看一下更新流程是什么样的。

// 更新前
<ul><li key="a">a</li><li key="b">b</li><li key="c">c</li><li key="d">d</li>
</ul>

// 更新后
<ul><li key="d">d</li><li key="a">a</li><li key="b">b</li><li key="c">c</li>
</ul>

在第一轮遍历时，我们遇到第一个节点，发现 key 不同，所以直接跳过，进行第二轮遍历。

剩余的旧的 FiberNode 放入到一个 map 里：