react跟vue的diff算法有什么区别

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react跟vue的diff算法有什么区别

在说diff算法之前先来了解一下虚拟DOM：

虚拟DOM只保留了真实DOM节点的一些基本属性，和节点之间的层次关系，它相当于建立在javascript和DOM之间的一层“缓存”。

虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率。

什么是diff算法

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

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

原始的diff算法

最初始的diff算法其实就是遍历循环比较,这里我就不画图了,简单的说一下,很重要,首先肯定要理解啥叫diff算法,然后才知道vue和react的diff算法是怎么做的优化

原始diff算法就是,两个虚拟dom树,进行逐一对比,而且是不分层级的,就是说什么呢,如果是一个虚拟dom树,从根节点到以后分支的每一个节点,都要单独拿出来跟新生成的节点做比较,这就是最原始的diff算法,这个diff算法的时间复杂度是O(n ^3),表面上看是(n ^2),因为单独一个个的去跟另外的n个相比较,肯定是n ^2次就比较结束了,但是实际上不是的,比较完之后我们还要计算如何在最优的地方放置最佳的节点,所以就是O(n ^3)了,实际上我们从算法层面来看,原始的diff算法从功能上是解决了先对比再处理实际dom的需求,但是实际上我们的流程变得更加的复杂和笨拙

优化的diff算法

这里其实要说一下就是vue和react的diff算法都是优化过的diff算法,而且有着相同的优化点,就是同级比较,不做跨级比较

就是我们分析可以发现,在实际的web展示中,非同级的节点移动是非常少的,所以我们选择做同级比较

同级比较的解释就是:只比较同层的节点，不同层不做比较。不同层的只需要删除原节点，并且新建插入更新节点

这个是我在网上看到的图片,我实在是懒的画,如有侵权请联系我删除,简单来讲就是图上所说的,树结构是有层级的,那么新老树结构都是可以对比的,对比之后会进行实际的dom操作,也就减少了改变数据产生的整体回流或重绘

Vue和React中diff算法区别

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

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

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

推荐学习：《react视频教程》

以上就是react跟vue的diff算法有什么区别的详细内容，更多请关注悠悠之家其它相关文章！