【React】Diff算法

1. React15 Diff算法（递归进行）

一句话概括：新虚拟DOM和旧虚拟DOM对比，找出差异，根据差异更新真实DOM
Diff过程描述：
1. 树比较(DOM)
同层节点之间相互比较，不会跨层级比较。（当发现节点不存在了，则将该节点及其⼦节点全部删除）
2. 组件比较(class组件)
不同类型的节点，产生不同的树结构。（节点的类型相同，则按原策略继续比较虚拟DOM，节点的类型不同，移除老节点，创建新节点）
3. 元素比较(DOM)
同一层级子节点，可以通过 key 来指定那些节点在不同的渲染下保持稳定

2. React16+ Diff算法（Fiber Reconciler，异步可中断）

一句话概括：React17 Diff算法是新JSX对象跟老Fiber树的对比，生成新Fiber的过程
Diff过程描述：
1. 单节点比较：如果新的子节点（JSX）只有一个元素的话，对应老Fiber是一个或者多个。
1.1 key相同，type相同，复用老Fiber，将老Fiber节点标记为更新；
1.2 key相同，type不同，老Fiber标记删除，根据新的JSX生成新的Fiber，并标记插入；
1.3 key不同，将当前老Fiber标记删除，继续与老Fiber节点的其他兄弟Fiber进行比较。
2. 多节点比较：如果JSX对象是一个数组的话
第一轮遍历（依次比较）：
2.1 依次比较，key和type都相同，全部可复用
2.2 遇到key相同，type不同，不可复用，则将相应老Fiber节点标记删除，根据JSX生成新的Fiber节点
2.3 遇到key不同，直接进入第二轮遍历
2.4 如果JSX对象遍历结束，或者老Fiber遍历结束，进入第二轮遍历
第二轮遍历（分四种情况）
2.5 JSX对象和老Fiber都遍历完了，第二轮遍历直接结束
2.6 JSX对象遍历完了，老Fiber没有遍历完，将剩下老Fiber节点标记删除
2.7 JSX对象没有遍历完，老Fiber遍历完了，根据剩下JSX中元素创建新Fiber，并标记插入
2.8 JSX对象和老Fiber都没有遍历完，根据JSX对象中元素的顺序，对老Fiber进行移动。

所有标记effectTag的Fiber节点形成一条单向链表，在commit阶段，遍历该单向链表，根据effectTag更新真实DOM