Vue和React中diff算法的区别
虚拟DOM在说diff算法之前先来了解一下虚拟DOM:虚拟DOM只保留了真实DOM节点的一些基本属性,和节点之间的层次关系,它相当于建立在javascript和DOM之间的一层“缓存”。虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率。什么是diff算法React需要同时维护两棵虚拟DOM树:一棵表示当前的DOM结构,另一棵在Reac
虚拟DOM
在说diff算法之前先来了解一下虚拟DOM:
虚拟DOM只保留了真实DOM节点的一些基本属性,和节点之间的层次关系,它相当于建立在javascript和DOM之间的一层“缓存”。
虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率。
什么是diff算法
React需要同时维护两棵虚拟DOM树:一棵表示当前的DOM结构,另一棵在React状态变更将要重新渲染时生成。React通过比较这两棵树的差异,决定是否需要修改DOM结构,以及如何修改。
简单来说Diff算法在虚拟DOM上实现,是虚拟DOM的加速器,提升性能的法宝。
Vue和React中diff算法区别
vue和react的diff算法,都是忽略跨级比较,只做同级比较。vue diff时调动patch函数,参数是vnode和oldVnode,分别代表新旧节点。
-
vue比对节点,当节点元素类型相同,但是className不同,认为是不同类型元素,删除重建,而react会认为是同类型节点,只是修改节点属性
-
vue的列表比对,采用从两端到中间的比对方式,而react则采用从左到右依次比对的方式。当一个集合,只是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点移动到第一个。总体上,vue的对比方式更高效。
更多推荐
所有评论(0)