react diff算法源码解析

react中diff算法又称为调和算法，对应函数名为reconcilechildren，它的主要作用是标记更新过程中那些元素发生了变化，这些变化包括新增、移动、删除。过程发生在beginwork阶段，只有非初次渲染才会diff。

以前看过一些文章将diff算法表述为两颗fiber树的比较，这是不正确的，实际的diff过程是一组现有的fiber节点和新的由jsx生成的reactelement的比较，然后生成新的fiber节点的过程，这个过程中也会尝试复用现有fiber节点。

节点diff又分为两种：

1. 单节点diff —— element、portal、string、number。
2. 多节点diff —— array、iterator。
   

以下react版本为17.0.1，代码文件为reactchildfiber.old.js。

单节点diff

单节点diff比较简单，只有key相同并且type相同的情况才会尝试复用节点，否则会返回新的节点。

单节点大部分情况下我们都不会去赋值key，所以它们默认为null，也是相同的。

reconcilesingleelement

多节点diff

源码中将多节点分为了数组节点和可迭代节点。

对应的diff函数分别是reconcilechildrenarray和reconcilechildreniterator。它们的核心diff逻辑是相同的，所以只分析数组节点的diff —— reconcilechildrenarray函数。

这一段的代码比较长，但逻辑很清晰，从分割线分为两轮遍历。

• 第一轮遍历的是顺序相同且key也相同的节点，这些节点需要做更新操作。
• 第二轮遍历的是顺序不同，可能key也不同的节点，这些节点需要做新增、移动或删除操作。
  

第一轮遍历只针对key和顺序都相同的情况，这些key对应的节点位置没有发生改变，只需要做更新操作，一旦遍历遇到key不同的情况就需要跳出循环。

在第一轮遍历完后也分为两种情况。

1. 新节点数量少于旧节点数量，这时候需要把多余的旧节点标记为删除。
2. 新节点数量大于旧节点数量，这时候需要把多余的新节点标记为新增。
   

第二轮遍历针对key不同或顺序不同的情况，可能情况如下：

第二轮的遍历会稍微复杂一点，后文在细讲。

详细的代码如下。

reconcilechildrenarray

第一轮遍历比较好理解，这里再细分析一下第二轮遍历，因为第二轮会出现复用是否需要移动的问题。

第二轮遍历首先遍历剩余的oldfiber，组成一个key -> 旧fiber节点的map，这用可以通过key来快速的获取旧节点。

接下来的遍历依然是使用的新节点为遍历对象，每次遍历使用新节点的key从map中取出旧节点来对比是否能复用，对应的函数为updatefrommap。

如果节点存在alternate属性，则是复用的节点，这时候需要将它从existingchildren里移除，后续会把第二轮遍历完后依然存在在existingchildren里的节点标记为删除。

如何判断节点移动了？

这里存在一个变量lastplacedindex用来判断节点是否移动，每次将节点添加到新的fiber链表中，都会更新这个值。

当复用的节点oldindex小于lastplacedindex时，则为移动，如果不需要移动，则会将lastplacedindex更新为较大的oldindex，下一个节点会以新值判断，代码如下：

举个例子：

abcd均为key值。

第一轮遍历后剩下的需要对比节点:

a节点在第一轮已经复用，并且调用过placechild，这时lastplacedindex值为0。

进入第二轮遍历，依然是以新节点为遍历对象。

由这个例子可以看出，react中将右侧不需要移动的节点作为参照，将需要移动的节点都是统一从左向右移动的。

在后续layout阶段会将这里标记了placement的节点做insertbefore操作。

总结

react中的diff算法核心代码不算很长，但是却引入key巧妙的将复杂度由o(n3 )变为了o(n)。

码农内卷太严重，所以不得不学习源码了。

以上就是react diff算法源码解析的详细内容，更多关于react diff算法的资料请关注其它相关文章！