vue和react的diff算法源码

news/2024/5/25 10:39:50/文章来源:https://blog.csdn.net/wyzqhhhh/article/details/136565020

Vue.js 中的虚拟 DOM Diff 算法是其性能优化的关键之一。

Vue.js 的 Diff 算法主要基于 Snabbdom,以下是 Vue.js 中虚拟 DOM Diff 算法的简化版伪代码,以便说明其基本思想:

function patch(oldVnode, vnode) {// 如果 oldVnode 不存在,说明是初次渲染,直接创建新的元素if (!oldVnode) {createElm(vnode);} else {// 如果 oldVnode 存在,说明是更新操作if (sameVnode(oldVnode, vnode)) {// 如果新旧节点相同,执行 patchVnode 进行更新patchVnode(oldVnode, vnode);} else {// 如果新旧节点不同,直接替换 oldVnodeconst parent = oldVnode.parentNode;const elm = createElm(vnode);parent.insertBefore(elm, oldVnode);parent.removeChild(oldVnode);}}
}function patchVnode(oldVnode, vnode) {// ... 具体的 Diff 算法实现
}function sameVnode(oldVnode, vnode) {// 判断两个节点是否相同,通常通过 key 和 tag 判断return oldVnode.key === vnode.key && oldVnode.tag === vnode.tag;
}

这里主要关注 patchVnode 函数,它是 Diff 算法的核心。Vue.js 的 Diff 算法采用了一种双端比较的策略,具体步骤如下:

1.同层级比较: 首先比较新旧节点的同层级,通过 tag 和 key 判断是否为相同节点。
2.更新属性: 如果同层级节点相同,就会比较其属性,更新新旧节点的属性。
3.更新子节点: 进一步比较新旧节点的子节点。这个过程可能会涉及递归调用 patch 函数。
4.删除多余节点: 如果新节点的子节点数量小于旧节点,说明有节点被删除,需要将多余的节点从 DOM 中移除。
5.新增节点: 如果新节点的子节点数量大于旧节点,说明有节点被新增,需要将新增的节点创建并插入到相应位置。

Vue.js 的 Diff 算法通过对比新旧虚拟 DOM 树的节点,最小化了对实际 DOM 的操作,提高了渲染效率。这个算法的时间复杂度是 O(n),其中 n 是节点的数量,是一种相对高效的算法。
需要注意,上述伪代码只是为了说明基本思想,

Vue.js 中的 Diff 算法还包含了一些优化策略,比如通过设置 key 来提高比较效率,以及对特殊节点(如组件节点)的处理等。

React 的 Diff 算法是虚拟 DOM(Virtual DOM)的核心部分,

用于高效地更新实际 DOM。以下是 React 的 Diff 算法的基本原理和步骤:

1.Tree Diff(树协调):
React 会对新旧两棵虚拟 DOM 树进行深度优先遍历,对比相应节点,找出差异。
如果节点类型不同,直接替换整个节点及其子树。
如果节点类型相同,进入下一步比较。

2.Component-level(组件级别)比较:
如果节点是组件,React 会比较组件的类型,如果类型相同,会更新组件实例并递归比较其子节点。
如果组件类型不同,React 会拆卸旧组件,挂载新组件,然后递归比较其子节点。

3.Element-level(元素级别)比较:
如果节点是元素(HTML 元素),React 会比较元素的属性,更新发生变化的属性。
React 会进一步比较元素的子节点,递归进行上述的 Tree Diff。

4.Key 的使用:
React 在进行比较时,会根据元素的 key 属性来优化比较过程。
如果两个元素的 key 不同,React 将认为这是两个不同的节点,直接替换整个节点及其子树。
如果两个元素的 key 相同,React 会认为它们可能是同一个节点,进一步比较其子节点。

5.列表(Lists)的优化:
当处理列表时,React 会尽量复用相同位置的元素,而不是移动元素到新位置。
React 使用一种“key-indexed” 的策略,通过元素的 key 和索引来匹配新旧节点。


6.Diff 策略:

React 的 Diff 算法并不会对整个树进行比较,而是采用一种深度优先、单向的比较策略。
在比较过程中,React 会标记节点的更新状态,将差异记录在变更集合(change set)中。
.最终,React 会根据变更集合对实际 DOM 进行最小化的更新,以提高性能。

React 的 Diff 算法的核心思想是尽量减少实际 DOM 操作,通过高效地识别并应用变更,实现快速的页面更新。在 React Fiber 架构中,进一步实现了异步渲染和可中断更新,提升了用户体验。

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Parade Series - WebRTC ( < 300 ms Low Latency ) T.B.D

Parade Series - FFMPEG (Stable X64) 延时测试秒表计时器 ini/config.ini [system] homeserver storestore\nvr.db versionV20240312001 verbosefalse [monitor] listrtsp00,rtsp01,rtsp02 timeout30000 [rtsp00] typelocal deviceSurface Camera Front schemartsp ip127…

图像处理与图像分析—图像统计特性的计算(纯C语言实现灰度值显示)

根据输入的灰度图像,分别计算图像的均值、方差等统计特征,并计算图像的直方图特征并以图形方式显示图像的直方图(用C或C语言实现)。 学习将会依据教材图像处理与图像分析基础(C/C)版内容展开 在上个笔记中&…

HTTP/2的三大改进:头部压缩、多路复用和服务器推送

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Midjourney绘图欣赏系列【人物篇】(一)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子,它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同,Midjourney 是自筹资金且闭源的,因此确切了解其幕后内容尚不…

微信小程序一次性订阅requestSubscribeMessage授权和操作详解

一次性订阅:用户订阅一次发一次通知 一、授权 — requestSubscribeMessage Taro.requestSubscribeMessage({tmplIds: [], // 需要订阅的消息模板的id的集合success (res) {console.log("同意授权", res)},fail(res) {console.log(拒绝授权, res)}})点击或…

Java爬虫-获取数据的方式之一

目录 一、jsoup的使用 1.概述 2.主要功能 3.快速入门 4.数据准备 二、Selenium 1.概述 2.使用 三、Selenium配合jsoup获取数据 四、爬虫准则 五、Seleniumjsoupmybatis实现数据保存 1.筛选需要的数据 2.创建一个表,准备存储数据 手写?不存在…

el-Upload 上传组件,on-success方法response返回值为空

前言 家人们谁懂啊,我最近在用el-upload组件做上传用户的头像的功能,用的是它自带的action方法自动上传,它不是有个on-success方法吗,是个回调函数,上传成功后会返回三个参数,response(是一个表…

使用Barrier共享鼠标键盘,通过macos控制ubuntu系统

之前文章写过如何使用barrrier通过windows系统控制ubuntu系统,该文章将详细介绍如何使用barrier通过macos系统控制ubuntu系统 一、macOS安装barrier macOS版本barrier链接 1、双击点开安装包 2、将安装包里的barrier拷贝到macOS的达达->应用程序中 3、在达达…

[QT]自定义的QtabWidget

需求 最近有一个需求就是一个QTabWidget要求有四个tab页在左侧用于显示主页面&#xff0c;在右侧有一个关于按钮&#xff0c;点击后用于弹出窗口显示一些程序相关信息。主要是怎么实现右侧按钮 相关代码 #ifndef MYTABWIDGET_H #define MYTABWIDGET_H#include <QWidget&g…

元宇宙崛起:区块链与金融科技共绘数字新世界

文章目录 一、引言二、元宇宙与区块链的深度融合三、区块链在元宇宙金融中的应用四、金融科技在元宇宙中的创新应用五、面临的挑战与机遇《区块链与金融科技》亮点内容简介获取方式 一、引言 随着科技的飞速发展&#xff0c;元宇宙概念逐渐走进人们的视野&#xff0c;成为数字…

手机备忘录可以设置密码吗 能锁屏加密的备忘录

在繁忙的生活中&#xff0c;手机备忘录成了我随身携带的“小秘书”。那些关于工作的灵感、生活的琐事&#xff0c;甚至深藏心底的小秘密&#xff0c;都被我一一记录在里面。然而&#xff0c;每次当手机离开我的视线&#xff0c;或者需要借给他人使用时&#xff0c;我总会心生担…

贝叶斯优化的门控循环神经网络BO-GRU(时序预测)的Matlab实现

贝叶斯优化的门控循环神经网络&#xff08;BO-GRU&#xff09;是一种结合了贝叶斯优化&#xff08;Bayesian Optimization, BO&#xff09;和门控循环单元&#xff08;Gated Recurrent Unit, GRU&#xff09;的模型&#xff0c;旨在进行时序预测。这种模型特别适用于时间序列数…

HTML 学习笔记(七)列表

html中的列表分为以下三种&#xff1a;有序列表&#xff0c;无序列表和自定义列表 1.有序列表 有序列表由两个元素组成&#xff1a;元素ol和元素li&#xff0c;此两个元素是父子关系&#xff0c;li必须包裹在ol里使用&#xff0c; ol里直接嵌套的只有li&#xff0c;其嵌套效果…

SpringBoot配置达梦数据库依赖(达梦8)

maven配置 <!-- 达梦数据库 --><dependency><groupId>com.dameng</groupId><artifactId>DmJdbcDriver18</artifactId><version>8.1.1.193</version></dependency><dependency><groupId>com.alibaba&l…

Day33:安全开发-JavaEE应用SQL预编译Filter过滤器Listener监听器访问控制

目录 JavaEE-预编译-SQL JavaEE-过滤器-Filter JavaEE-监听器-Listen 思维导图 Java知识点 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;序列化数据&#xff0c;身份验证&#xff0c;框架开发&#xff0c;第三方库使用等. 框架库&#xff1a;MyBatis&#…

Era Network在web3行业的价值

近年来,以比特币和以太坊为代表的区块链技术快速发展,去中心化、信任机制的创新概念也越来越受到广泛关注。AI人工智能与区块链技术在互联网应用领域的落地,正在引领互联网进入价值互联的新阶段web3.0时代&#xff01; 新行业发展的价值与优先级 WEB3行业发展的核心需求是&…

N3-Chitosan N3 叠氮修饰壳聚糖 改性叠氮 CS-Azide

碳水科技&#xff08;Tanshtech&#xff09;可以提供壳聚糖衍生物 1.壳聚糖的各种改性(NH2/COOH/SH/N3/MAL-Chitosan等) 2.各种靶向小分子修饰壳聚糖&#xff08;Biotin/FA/cRGD-Chitosan等&#xff09; 3.各种荧光标记壳聚糖(FITC/RB/CY-Chitosan等) 4.壳聚糖和各种聚合物…

机器学习的基础学习笔记

黑马的学习视频 大家常说的人工智能、机器学习、深度学习其实是包含关系&#xff0c;深度学习是机器学习的一种特殊方法&#xff0c;而机器学习又是人工智能的一个子领域。 其中机器学习是使计算机系统能够通过学习经验和数据来改进性能。机器学习算法能够从数据中发现模式&am…

sqllab第七关通关笔记

知识点&#xff1a; 利用回显信息不同进行盲注爆破出敏感信息两种绕过方法 单引号闭合绕过&#xff1b;不加注释符 id 1 and 11 完全闭合原始语句的绕过&#xff1b;这题是采用了where id((输入)) id 1)) and 11 -- 首先判断注入类型 构造id1/0 正常回显&#xff0c;字符型注…

5.Python从入门到精通—Python 运算符

5.Python从入门到精通—Python 运算符 Python 运算符算术运算符比较&#xff08;关系&#xff09;运算符赋值运算符逻辑运算符位运算符成员运算符身份运算符运算符优先级 Python 运算符 Python语言支持以下类型的运算符: 算术运算符比较&#xff08;关系&#xff09;运算符赋…