【React】react的diff算法流程

我们都知道，React和Vue框架中都使用了diff算法来优化节点的更新。在Vue中，使用了两对指针并且设置了四种命中策略+map表来实现diff最小化更新的。那么React的diff算法和Vue的diff算法是相同还是有所区别呢？今天我们就来探究一下。

首先，我们需要明确react的diff算法的执行时机：diff算法发生在新的jsx产生的ReactElement和旧Fiber树进行对比，生成新Fiber树的过程中。

所以我们先要看看Fiber树到底长什么样。以下代码，其对应的Fiber树就长这样。

 child指向子节点，reutrn指向父节点，sibling指向后一个兄弟节点。

在diff阶段，会为旧的fiber打上对应的标记，后序再统一处理。例如：Delete标记（需要删除），Placement标记（需要插入）。

和Vue一样，React的也是只进行同层元素的对比。也就是同层元素之和同层元素比。

我们可以从两种情况考虑。

1、更新后只剩下一个节点

如果更新后同层只剩下一个节点，会与更新前的节点进行对比。会先比较key再比较type，只有key相同才会比较type