站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-04-21 [网络编程]作者:fabuyuan 浏览:7 次

区别:1、当节点元素类型相同,但className不同时,vue认为是不同类型元素,会删除重建,而react会认为是同类型节点,只修改节点属性;2、列表比对,vue采用从两端到中间的比对方式,而react则采用从左到右依次比对的方式。

本教程操作环境: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算法有什么区别的详细内容,更多请关注站长家园其它相关文章!

本文标签:  React

转载请注明来源:react跟vue的diff算法有什么区别

本文永久链接地址:https://www.adminjie.com/post/11414.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 完全掌握java之String类

      完全掌握java之String类

      本篇文章给大家带来了关于java的相关知识,其中主要介绍了关于string类的相关问题,包括了字符串的常量池、字符串的不可变性等等相关内容,下面一起来看一下,希...

    • 简单学习Python字符和列表(实例详解)

      简单学习Python字符和列表(实例详解)

      本篇文章给大家带来了关于python的相关知识,其中主要介绍了关于字符和列表的相关问题,包括了字符串的输入输出、列表循环遍历、列表的增删改查以及列表的嵌套等等内...

    • 图文解析Redis线程模型

      图文解析Redis线程模型

      本篇文章给大家带来了关于Redis的相关知识,其中主要介绍了关于线程模型的相关问题,Redis它是一个单线程的,下面就一起来看一下,希望对大家有帮助。推荐学习:...

    • jquery怎么判断元素是否有子节点

      jquery怎么判断元素是否有子节点

      方法:1、用children()获取元素下的所有子节点,语法“元素对象.children()”,会返回一个包含子节点的jQ对象;2、用length检测子节点个数...

    • jquery对象访问的方法有哪些

      jquery对象访问的方法有哪些

      jquery对象访问的方法有:1、each(),可以遍历指定的jquery对象,语法“$.each(对象,回调函数)”;2、size(),可统计jquery对象...

    热门文章