react diff算法源码解析
react中diff算法又称为调和算法，对应函数名为reconcilechildren，它的主要作用是标记更新过程中那些元素发生了变化，这些变化包括新增、移动、删除。过程发生在beginwork阶段，只有非初次渲染才会diff。
以前看过一些文章将diff算法表述为两颗fiber树的比较，这是不正确的，实际的diff过程是一组现有的fiber节点和新的由jsx生成的reactelement的比较，然后生成新的fiber节点的过程，这个过程中也会尝试复用现有fiber节点。
节点diff又分为两种：
- 单节点diff ——
element、portal、string、number。 - 多节点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不同的情况就需要跳出循环。
在第一轮遍历完后也分为两种情况。
- 新节点数量少于旧节点数量，这时候需要把多余的旧节点标记为删除。
- 新节点数量大于旧节点数量，这时候需要把多余的新节点标记为新增。
第二轮遍历针对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算法的资料请关注其它相关文章！