对比react和vue的diff算法

最近从vue使用转到react使用，

以前研究过vue的diff算法，闲来看了看react的diff源码，写一点本身的看法

1.vue的diff算法

diff算法发生在虚拟dom上

判断是否同一个节点：selector和key都要同样

diff规则：

1. 只比较同层的节点，不一样层不作比较。删除原节点，而且新建插入更新节点（实际开发中不多遇到）
2. 新旧节点是同层节点，但不是同一个节点，不作精细化比较。删除原节点，而且新建插入更新节点（实际开发中不多遇到）
3. 新旧节点是同层节点，也是同一个节点，须要作精细化比较

diff的精细化比较策略

1. 新的头部子节点，旧的头部子节点
2. 新的尾部子节点，旧的尾部子节点
3. 新的尾部子节点，旧的头部子节点
4. 新的头部子节点，旧的尾部子节点

若是条件1知足，新旧节点头部指针日后移。

若是条件2知足，新旧节点尾部指针往前移。判断是否新的子节点先循环完（头尾位置指针判断），是：就是删除了节点，否：新增了节点，新增的节点按照条件4添加

若是条件3知足，须要移动新的头部子节点到旧的尾部子节点后面

若是条件4知足，须要移动新的头部子节点到旧的头部子节点前面

若是4种都未匹配到，而且指针条件未知足，须要loop匹配

vue在把被移动的节点和匹配的节点设置为undefined

2.react的diff算法

从左往右依次对比，利用元素的index和标识lastIndex进行比较，若是知足index < lastIndex就移动元素，删除和添加则各自按照规则调整

跨层不比较，同层比较，跟vue同样

diff策略

新节点的位置是lastIndex，旧节点的位置是index。重新的节点中依次读取节点索引，对比旧的节点数据索引

1. 不知足 index < lastIndex 的条件，不移动；知足 index < lastIndex 的条件，移动节点。
2. 每一次比较都须要从新设置 lastIndex=(index,lastIndex)中的较大数
3. 移动的节点在前一个被操做的节点后面
4. 若是重新的节点集合获取的节点在旧节点集合未找到，就是新增，lastIndex为上一次的值不变
5. 若是新的节点集合遍历完了，旧节点还有值就是删除，loop删除掉就行

最恶心的状况：若是把最后一个元素移到最前面，react会依次移动节点向后

3.对比

类似的地方：vue和react的diff算法，都是不进行跨层级比较，只作同级比较。

不一样点：

1. vue会在patch函数中给被操做的节点打补丁（undefined），在diff的时候更清晰
2. vue对比节点，当节点元素类型相同，可是className不一样时，认为是不一样类型的元素，删除从新建立；而react则认为是同类型节点，进行修改操做
3. diff策略，vue的性能优于react