Open sufuwang opened 1 year ago
这三个限制为了降低 Diff 算法的复杂度
React 默认对比同层级 DOM 元素,如果 DOM 元素的顺序改变,则需要添加 key 来复用 DOM ,来突破限制二的约束
reconcile 流程的本质,是对比 current fiberNode 与 JSX 对象,生成 wip fiberNode
单节点对比时,步骤如下
Diff 算法会遍历两次 fiberNode,第一轮遍历尝试复用节点,第二轮遍历处理剩下的节点,包括新增、删除、移动 DOM 元素
假设一个场景,现在是需要对比同层级的 \
元素,current fiberNode 以链表的数据结构存储,而 JSX 对象则是以数组的数据结构存储。因为无法使用双指针,所以无法借鉴 Vue 的双端/快速 Diff 算法。React 判断 DOM 元素是否需要移位的逻辑,与 Vue 的简单 Diff 算法的逻辑一致,维护一个最大索引,若 current fiberNode 的索引小于这个最大索引,则需要移位。具体参考 #10 Vue 简单 Diff 算法
reconcile 流程
《React 设计原理》对 reconcile 流程的描述如下
这里的 current fiberNode 就是 Fiber 架构中的前缓冲区,生成的 wip fiberNode 是后缓冲区