Diff算法对比（Vue，React）

最新推荐文章于 2023-12-21 15:18:10 发布
最新推荐文章于 2023-12-21 15:18:10 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 算法 文章标签： vue.js react.js 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moekosu/article/details/122549056
版权

传统Diff算法

传统Diff算法使用的是循环递归每一个节点，不区分层级

即顶层节点循环遍历新vnode的每个节点，这样会导致复杂度能达到O(n^3)

Vue的Diff算法（Vue2.0）

vue的diff算法使用了patch函数，类似打补丁

使用的是4指针算法，在新旧节点头尾定义指针位置进行遍历

ps：Vue3.0的diff算法借鉴了ivi算法和inferno算法

React的Diff算法

react的Diff算法，将节点分为三种

1.tree diff

对整个树结构进行分层处理，同一层级的节点对比，不存在则删除，跨层的节点因为分开同层级对比，所以将一个节点从第二层移动到第三层的一个简单操作，可能触发删除新增两个操作

2.component diff

如果是同类型的组件，则进行element diff，如果不是同类型的组件，则会直接替换掉子组件

3.element diff

元素对比分为使用key和不使用key的情况

不使用key的情况下，对节点会产生删除新增操作

使用key，则会对新集合进行遍历，判断是否存在老节点，减少了删除新增的操作

参考：

聊一聊Diff算法（React、Vue2.x、Vue3.x） - 知乎

moekosu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析Vue 2.5的Diff算法
11-27
updataChildren是Diff算法的核心，所以本文对updataChildren进行了图文的分析。 1.VNode对象 一个VNode的实例包含了以下属性，这部分代码在src/core/vdom/vnode.js里 export default class VNode { tag: string |
2023前端vue+react最全面试题和答案汇总
02-09
7、说说vue中的虚拟dom和diff算法 8、Vue 的 keep-live 用过吗？作用是什么？ 9、vue 中插槽共有几种，及插槽的作用 9、谈谈Vue路由守卫 10、redux的实现原理 11、useEffect的依赖为引用类型如何处理 12、说说在使用...
vue与react的diff算法
小张的博客
03-20 7163
我们都知道的一件事,就是vue和react框架,核心算法都是diff算法,啥叫diff算法可能有一部分人都是没有深究的,今天梳理一下vue和react的diff算法,也说一下有啥区别 什么叫虚拟dom,就是原本我们在页面上展示的dom结构叫做dom树,我们把数据和将要渲染的代码模拟dom结构生成的对象类型的数据结构,就叫虚拟dom树,将真实的DOM的数据抽取出来，以对象的形式模拟树形结构,我们先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个.
vue和react diff算法比较
hubert39641020的博客
09-25 4071
3.① Vue的列表比对，采用从两端到中间的方式，旧集合和新集合两端各存在两个指针，两两进行比较，如果匹配上了就按照新集合去调整旧集合，每次对比结束后，指针向队列中间移动；③当一个集合把最后一个节点移动到最前面，react会把前面的节点依次向后移动，而Vue只会把最后一个节点放在最前面，这样的操作来看，Vue的diff性能是高于react的。2.Vue对比节点，当节点元素类型相同，但是className不同时，认为是不同类型的元素，删除重新创建，而react则认为是同类型节点，进行修改操作。
VueDiff算法对比ReactDiff算法区别
wyh666csdn的博客
01-10 825
当老 VNode 节点的 end 和新 VNode 节点的 start 相同时，这时候在 patchVnode 后，还需要将当前真实 dom 节点移动到 oldStartVnode 的前面，同时老 VNode 节点结束索引减 1，新 VNode 节点的开始索引加 1。只有旧节点有子节点而新节点没有，说明更新后的页面，旧节点全部都不见了，那么要做的，就是把所有的旧节点删除，也就是直接把DOM 删除。旧节点和新节点自身不一样，当两个节点不一样的时候，直接创建新节点，删除旧节点。
React、Vue2、Vue3的三种Diff算法
油墨香^-^的博客
09-28 1556
本文章不讲解vDom实现，mount挂载，以及render函数。只讨论三种diff算法。VNode类型不考虑component、functional-component、Fragment、Teleport。只考虑Element和Text。下面的diff算法中会出现几个方法，在这里进行罗列，并说明其功能: 通过vnode生成真实的DOM节点。parent为其父级的真实DOM节点，refNode为真实的DOM节点，其父级节点为parent。如果refNode不为空，vnode生成的DOM节点就会插入到。
简单聊聊react和vue它们的diff算法
qq_42054470的博客
05-29 401
React 的 diff 算法采用了一种基于 Fiber 架构的双缓存技术，即每次页面更新时，同时在内存中创建两个 Virtual DOM树，一个是当前的 Virtual DOM 树，另一个是更新前的 Virtual DOM 树。前言：React 和 Vue 都采用了 Virtual DOM，并基于它们的 Virtual DOM 实现了 diff 算法，用于对比新旧虚拟 DOM 树的差异，并尽可能地进行最小化更新，以优化页面渲染的性能。Vue 的 diff 算法采用了双端比较的策略。
一篇文章带你搞懂Vue虚拟Dom与diff算法
12-28
使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。 虚拟DOM 什么是虚拟DOM？ 虚拟DOM...
vue mvvm数据响应实现
01-18
另一方面，框架会通过虚拟dom及diff算法提高页面性能。这其中需要数据优先最根本的思路就是实现数据响应式。so，本次来看下如何基于原生实现数据响应式。 vue中的数据响应 vue中会根据数据将数据通过大胡子语法及...
深入浅析vue组件间事件传递
11-29
但是，在vue2.+中，vue引入了diff算法和虚拟dom来提升效率。我们知道这些事为了处理频繁更新dom元素所提出的一种优化方案，可频繁变动更新以及事件监听的初始化之间是否会有矛盾，当组件需要变动时，有没有对注册过...
Vue和React的区别到底是什么？
Always-Learning
03-06 2万+
一提到前端框架，相信大家都对Vue和React不陌生，这两个前端框架都是比较主流的，用户也都比较多，但是我们在使用这些框架的时候，是否对这两个框架之间的区别有所了解呢？接下来，让我们来一起的系统梳理这两个框架的区别是什么吧~ 预备知识介绍 在了解Vue和React的区别之前，我们首先来了解一下MVC和MVVM架构，这个知识点有助于我们对后续知识的了解。 MVC架构 首先MVC指的是Model-View-Controller，分别代表着模型层、视图层、控制器。 Model（模型层），主要管理的是.
vue和react diff的详解和不同
最新发布
weixin_44383533的博客
12-21 776
当4种方法都没有被匹配到的时候，用key进行查找，由于index为数字极大可能会与oldDom里的index重合，diff会判断为相同节点进行处理，但是对比的时候发现并不相同，最终会遍历查找到真实dom上导致重绘回流，性能消耗极大。sel:标签名，data:节点属性，children:子节点，elm:对应的真实节点，key：当前节点的key，text：当前节点的文字内容。tree-diff：逐层比较的过程就为tree-diff，当tree-diff结束的时候时候所有需要更新的元素都会被找到。
react和vue的diff过程有什么区别
weixin_49684995的博客
12-27 878
react是生成一个全新的数据，用diff方法去比对state。应用的状态被改变时，全部子组件都会重新渲染。所以react中diff的时Dom. Vue在渲染过程中，会跟踪每一个组件的依赖关系，不会重新渲染整个组件树，所以Vue diff的是数据。 ...
React入门学习（四）-- diffing 算法
小丞同学
09-10 464
大家好，我是小丞同学，一名大二的前端爱好者 这篇文章将尽力说明白 diff 算法 愿你忠于自己，热爱生活 前言 diff 算法是 React 提升渲染性能的一种优化算法，在 React 中有着很重要的地位，也不止于 React ，在 Vue 中也有 diff 算法，似乎没有差别。在最近的 React 学习中，学到了 diff 算法，感觉视频中的内容有点浅，对 diff 算法不够深入，因此想要深入的了解以下 diff 算法。于是在掘金，知乎，CSDN 等平台上，看了大量的博客，
Vue 和 React 源码大PK
azl397985856的专栏
04-12 266
作为前端最火的两个框架，React 和 Vue 几乎是面试必考的内容。特别是到了中高级前端岗，企业不仅要考察你对两个框架的应用，还会从源码层面考察你对框架的掌握程度，比如：Computed...
React和Vue区别
热门推荐
DFmoon
06-26 5万+
1.监听数据变化的实现原理不同 Vue通过getter/setter以及一些函数的劫持，能精确知道数据变化。 React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而Rea...
Vue数据响应原理及Diff比对
月光晒了很凉快的博客
09-01 1048
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。方法通知所有的订阅者，订阅者就会通过patch函数对比新旧虚拟节点是否一样，如果用新的虚拟节点则整个替换老节点，如果不是使用新节点，则根据子节点情况来进行同层比较。假如旧节点中存在 a 节点，而新节点中没有 a 节点，则直接将旧节点中的 a 节点销毁。没有新节点，直接触发旧节点的destory钩子，进行销毁。
vue与react的区别
baibaider的博客
03-27 1497
1.创建者等react是Facebook公司创建的js框架，并创新了新的语法，JSX（html in javascript），而vue相对来说更容易学习，且使用模板系统，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。2.关于虚拟dom改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。·Virtual DOM是一个映射真实DOM的JavaScri...
diff算法
qq_40826764的博客
03-21 1850
前言 Vue和React都是采用虚拟dom渲染的，当节点更新是用diff算法来比较。 正文 diff比较方式 在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。 <div> <p>123</p> </div> <div> <span>456</span> </di...
vue和react的diff算法比较
03-17
Vue 和 React 的 diff 算法有所不同。Vue 采用了类似于虚拟 DOM 的机制来更新视图，它只会更新发生变化的部分。React 采用了类似于重构的机制来更新视图，它会对整个组件进行重新渲染。在性能上 React 更优秀，因为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值