diff算法

1、同层对比

diff算法只会同层对比，是深度优先

2、对比流程

1. 数据改变触发setter,通知所有订阅者，订阅者门通过调用patch更新补丁
2. patch
   1. 对比是否标签相同，托相同patchVnode对比下一层
3. patchVnode(判断子节点一方有一方无)
   1. 判断newVnode和oldVnode是否指向同一个对象，如果是，那么直接return
   2. 如果他们都有文本节点并且不相等，那么将el的文本节点设置为newVnode的文本节点。
   3. 如果oldVnode有子节点而newVnode没有，则删除el的子节点
   4. 如果oldVnode没有子节点而newVnode有，则将newVnode的子节点真实化之后添加到el
4. updateChildren（两方都有子节点，用首尾指针）
   1. 
   2. 1、oldS 和 newS 使用sameVnode方法进行比较，sameVnode(oldS, newS)
   3. 2、oldS 和 newE 使用sameVnode方法进行比较，sameVnode(oldS, newE)
   4. 3、oldE 和 newS 使用sameVnode方法进行比较，sameVnode(oldE, newS)
   5. 4、oldE 和 newE 使用sameVnode方法进行比较，sameVnode(oldE, newE)
   6. 5、如果以上逻辑都匹配不到，再把所有旧子节点的 key 做一个映射到旧节点下标的 key -> index 表，然后用新 vnode 的 key 去找出在旧节点中可以复用的位置。

接下来就以上面代码为例，分析一下比较的过程

分析之前，请大家记住一点，最终的渲染结果都要以newVDOM为准，这也解释了为什么之后的节点移动需要移动到newVDOM所对应的位置

• 第一步

oldS = a, oldE = c
newS = b, newE = a

比较结果：oldS 和 newE 相等，需要把节点a移动到newE所对应的位置，也就是末尾，同时oldS++，newE--

• 第二步

oldS = b, oldE = c
newS = b, newE = e

比较结果：oldS 和 newS相等，需要把节点b移动到newS所对应的位置，同时oldS++,newS++

• 第三步

oldS = c, oldE = c
newS = c, newE = e

比较结果：oldS、oldE 和 newS相等，需要把节点c移动到newS所对应的位置，同时oldS++,newS++

• 第四步

oldS > oldE，则oldCh先遍历完成了，而newCh还没遍历完，说明newCh比oldCh多，所以需要将多出来的节点，插入到真实DOM上对应的位置上

React的diff与vue的diff

reactdiff：是单端，ABCD-》DABC

遍历新节点：D

查找老节点是否复用：A。B。C。D找到D

新节点：A

找到老节点：A，移动到D后边