diff算法

news2024/12/26 19:26:57

vue的diff算法详解

vue:

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点:

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中,循环从两边向中间比较
diff 算法在很多场景下都有应用,在 vue 中,作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

React之Diff 算法

react

在render阶段的beginWork函数中,会将上次更新产生的 Fiber 节点与本次更新的 JSX 对象(对应ClassComponent的this.render方法返回值,或者FunctionComponent执行的返回值)进行比较。根据比较的结果生成workInProgress Fiber,即本次更新的 Fiber 节点。即,React 将上次更新的结果与本次更新的值比较,只将变化的部分体现在 DOM 上。这个比较的过程,就是 Diff。

react中diff算法和vue中的diff算法区别。
React的diff和Vue的diff算法的不同之处
vue和react的diff算法都是进行同层次的比较,主要有以下两点不同:

vue对比节点,如果节点元素类型相同,但是className不同,认为是不同类型的元素,会进行删除重建,但是react则会认为是同类型的节点,只会修改节点属性。
vue的列表比对采用的是首尾指针法,而react采用的是从左到右依次比对的方式,当一个集合只是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点移动到第一个,从这点上来说vue的对比方式更加高效。

React的Diff算法:
React使用的diff算法通过以下几个规则来优化更新:

比较同一层级的节点,采用基于深度优先的比较方式。
利用 key 来帮助虚拟DOM优化更新(主要用于列表渲染)。
通过生命周期方法来控制是否进行完整更新。

Vue的Diff算法:
Vue的diff算法与React类似,但Vue通过模板编译生成虚拟DOM,再通过diff算法来比较每次更新的差异。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2252883.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c++领域展开第一幕——入门基础(命名空间、iostream、缺省参数、函数重载、nullptr、inline(内联函数))超详细!!!!

文章目录 前言一、c的第一个程序二、命名空间2.1 namespace 的价值2.2 namespace 的定义2.3 命名空间的使用 三、c的输入和输出四、缺省参数五、函数重载六、nullptr七、inline总结 前言 今天小编带着大家进入c的大门,虽然c难,但好事多磨,一起…

Java Web 1HTML快速入门

目录 一、Web开发介绍 1.什么是Web? 2.初识Web前端 二、HTML快速入门 1.什么是HTML、CSS? 2、案例练习 3.小结 三、VS Code开发工具 四、基础标签&样式(HTML) 2、实现标题--样式1(新闻标题的颜色&#xff0…

【Python网络爬虫笔记】7-网络爬虫的搜索工具re模块

目录 一、网络爬虫中的正则表达式和re模块(一)数据提取的精确性(二)处理复杂的文本结构(三)提高数据处理效率 二、正则表达式的内涵(一)、常用元字符(二)、量…

42_GAN网络详解(2)---常见的GAN

DCGAN CGAN 条件生成对抗网络(Conditional Generative Adversarial Networks, CGAN)是生成对抗网络(Generative Adversarial Networks, GAN)的一种变体,由Mehdi Mirza和Simon Osindero在2014年提出。CGAN的主要改进在…

PC端阅读器--koodo reader

官网:请在必应搜索引擎上输入 koodo reader GitHub:GitHub - koodo-reader/koodo-reader: Windows, macOS, Linux and Web 123云windows版:Koodo-Reader-1.5.1.exe下载 提取码:4455 优: 1.开源,懂&#x…

PyQt设计界面优化 #qss #ui设计 #QMainWindow

思维导图 通过qss实现ui界面设计优化 Qss是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性,它是用来美化UI界面。实现界面和程序的分离,快速切换界面。 首先我们在Pytchram创建一个新目录 然后将我们所需要的图片打…

多维数组及其应用————13

1. 二维数组 如果我们把 ⼀维数组做为数组的元 素,这时候就是⼆维数组, ⼆维数组作为数组元素的数组被为三维数组,⼆维数组以上的数组统称 为多维数组。 1.1 二维数组的创建 先行后列 其实也可以这样理解:把二维数组当成特殊的一维…

基于Java Springboot校园导航微信小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术:Html、Css、Js、Vue、Element-ui 数据库:MySQL 后端技术:Java、Spring Boot、MyBatis 三、运行环境 开发工具:IDEA/eclipse微信开发…

k8s,声明式API对象理解

命令式API 比如: 先kubectl create,再replace的操作,我们称为命令式配置文件操作 kubectl replace的执行过程,是使用新的YAML文件中的API对象,替换原有的API对象;而kubectl apply,则是执行了一…

【北京迅为】iTOP-4412全能版使用手册-第三十五章 WEB控制LED

iTOP-4412全能版采用四核Cortex-A9,主频为1.4GHz-1.6GHz,配备S5M8767 电源管理,集成USB HUB,选用高品质板对板连接器稳定可靠,大厂生产,做工精良。接口一应俱全,开发更简单,搭载全网通4G、支持WIFI、蓝牙、…

轻量的基于图结构的RAG方案LightRAG

LightRAG出自2024年10月的论文《LIGHTRAG: SIMPLE AND FASTRETRIEVAL-AUGMENTED GENERATION》(github),也是使用图结构来索引和搜索相关文本。 LightRAG作者认为已有的RAG系统有如下两个限制,导致难以回答类似"How does the rise of electric vehi…

分布式cap

P(分区安全)都能保证,就是在C(强一致)和A(性能)之间做取舍。 (即立马做主从同步,还是先返回写入结果等会再做主从同步。类似的还有,缓存和db之间的同步。&am…

AD7606使用方法

AD7606是一款8通道最高16位200ksps的AD采样芯片。5V单模拟电源供电,真双极性模拟输入可以选择10 V,5 V两种量程。支持串口与并口两种读取方式。 硬件连接方式: 配置引脚 引脚功能 详细说明 OS2 OS1 OS2 过采样率配置 000 1倍过采样率 …

[VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动

在现代Web开发中,Vue.js已经成为前端开发的热门选择之一。然而,将Vue.js项目打包并部署到生产环境可能会让一些开发者感到困惑。本文将详细介绍如何将Vue.js项目打包,并通过Tomcat服务器启动运行。 1. 准备工作 确保你的项目能够正常运行,项…

服务器与普通电脑有什么区别?

服务器和普通电脑(通常指的是个人计算机,即PC)有众多相似之处,主要构成包含:CPU,内存,芯片,I/O总线设备,电源,机箱及操作系统软件等,鉴于使用要求…

2.2 线性表的顺序表示

2.2.1 顺序表的定义 一、顺序表的基本概念 线性表的顺序存储又称顺序表。 它是用一组地址连续的存储单元依次存储线性表中的数据元素,从而使得逻辑上相邻的连个元素在物理上也相邻。 第1个元素存储在顺序表的起始位置,第i个元素存储位置后面紧接着存…

游戏引擎学习第30天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 在这段讨论中,重点是对开发过程中出现的游戏代码进行梳理和进一步优化的过程。 工作回顾:在第30天,回顾了前一天的工作,并提到今天的任务是继续从第29天的代码开始&#xff0c…

探索HarmonyOS:一键掌握Router与NavPathStatck的传参和页面回调技巧

路由的选择 HarmonyOS提供两种路由实现的方式,分别是 Router 和 NavPatchStack。两者使用场景和特效各有优劣。 组件适用场景特点备注Router模块间与模块内页面切换通过每个页面的url实现模块间解耦NavPathStack模块内页面切换通过组件级路由统一路由管理 什么时候使…

每日计划-1203

1. 完成 236. 二叉树的最近公共祖先 ​ /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL) {}* };*/ class Solution {public:TreeNode* lowe…

【AI系统】Auto-Tuning 原理

Auto-Tuning 原理 在硬件平台驱动算子运行需要使用各种优化方式来提高性能,然而传统的手工编写算子库面临各种窘境,衍生出了自动生成高性能算子的的方式,称为自动调优。在本文我们首先分析传统算子库面临的挑战,之后介绍基于 TVM…