React diff 算法

发表于 更新于 分类于 本文字数： 519 阅读时长 ≈ 1 分钟

理解 react 的 diff 算法

jsworke

同级节点的移动 增加 删除的具体实现

场景一 新旧集合中存在相同节点但位置不同时，如何移动节点

1
2
旧  a b c d
新  b a d c

React 先从新组合中取得 b，然后判断旧中是否存在相同节点 b，当发现存在节点 b 后，就去判断是否移动 b
涉及到两个变量 index 和 lastIndex

  • index:b 在集合里下标 此时 index = 1
  • lastIndex：类似于一个 map 的索引，一开始默认值是 0，它会与 map 中的元素进行比较，比较完后，更新当前的值（取 index 和 lastIndex 的较大数）

比较规则：

如果 index < lastIndex 那此元素就需要移动
在旧组合里将该元素移动到下标为 lastIndex 的位置

具体的计算过程看下图

jsworke

场景一 新集合中有新加入的节点，旧集合中有删除的节点

规则同上

1
2
旧  a b c d
新  b e c a

比较 b 此时 index = 1 lastindex = 0 1>0 b 不移动 更新 lastindex 为 1
当比较到 e 的时候，发现旧组合中不存在，故在旧组合下标为 1 的位置 创建 E，更新 lastIndex=1
…
对比到 a 因为是最后一个 所以 diff 操作结束

新组合对比完成后 再去对旧集合遍历 判断新集合没有，但旧集合有的元素（如 d），删除 d，diff 操作结束