vue和react diff算法的区别

前言

什么是diff算法：

React需要同时维护两棵虚拟DOM树：一棵表示当前的DOM结构，另一棵在React状态变更将要重新渲染时生成。React通过比较这两棵树的差异，决定是否需要修改DOM结构，以及如何修改

简单来说Diff算法在虚拟DOM上实现，是虚拟DOM的加速器，提升性能的法宝。

最原始的diff算法：原始diff算法就是,两个虚拟dom树,进行逐一对比,而且是不分层级的,就是说什么呢,如果是一个虚拟dom树,从根节点到以后分支的每一个节点,都要单独拿出来跟新生成的节点做比较,这就是最原始的diff算法,原始的diff算法从功能上是解决了先对比再处理实际dom的需求,但是实际上我们的流程变得更加的复杂和笨拙

---

一、diff算法的区别

vue和react的diff算法，都是忽略跨级比较，只做同级比较。vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。

vue比对节点，当节点元素类型相同，但是className不同，认为是不同类型元素，删除重建，而react会认为是同类型节点，只是修改节点属性

vue的列表比对，采用从两端到中间的比对方式，而react则采用从左到右依次比对的方式。当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。总体上，vue的对比方式更高效。

vue

1.vue对比节点。当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，而react认为是同类型节点，只是修改节点属性。

2.vue的列表对比，采用的是两端到中间比对的方式，而react采用的是从左到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移到第一个。总体上，vue的方式比较高效。

react

• 通过uodateDepth对虚拟数进行层级控制
• 只对两棵树同一层级进行比较，节点不存在就直接删掉，遍历一次就能完成比较
• 如果出现跨层操作，比如a从原位置移动到b位置，就删除原位置的a，在b新建a，所以a以下的树会被重建，所以官方不建议跨层操作，建议通过隐藏显示来操作，比如visibility:hidde