如何将React diff算法源码解析改写成长尾词？

本文共计2195个文字，预计阅读时间需要9分钟。

React中的Diff算法也被称为调和算法，函数名为+reconcileChildren。其主要作用是标记更新过程中那些发生了变化的元素，这些变化包括新增、移动、删除等。这些变化发生在+beginWork阶段。

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，也是相同的。