diff算法的流程

news2024/11/24 0:07:08

diff算法?

组件并不是真是的DOM节点,而是存在与内存中的一种数据结构,叫做虚拟DOM,只有当它真正插入文档中的时候才会真的变成DOM

React的设计时所有的DOM变动都先在虚拟的DOM上发生,然后再将实际变动的部分反映在真是DOM上。这就是DOM diff算法,它可以大大提升网页性能表现。

一:diff算法的作用域是什么?

diff算法存在patchChildren方法中,而patchChildren方法用在Flagment类型和element类型的vnode中。

  •  什么类型的vnode存在children?

element元素类型vnode和flagment碎片类型vnode

(什么是碎片?创建一个vue组件,它只有一个根节点。

<template><span></span><span></span></template>这样会报错。flagement的出现是虚拟的,根本不会在dom树中呈现。而vue组件的vue实例需要绑定到一个单一的DOM元素中。processFlagment用于处理Flagment类型的vnode)

  • patchChildren方法

1:patch每一个children vnode依次向下遍历

2:patchChildren方法根据是否存在key进行真正的diff或者直接patch

二:diff算法的作用?

diff算法的作用:在patch子vnode的过程中,找到新的vnode对应的老vnode,复用真是的DOM节点

如果没有diff算法:会浪费性能开销。因为没有diff算法,而是依次patch虚拟dom,那么稍微修改一下dom树,就会在patch过程没有一对正确的新老vnode,

老的vnode没有一个可以复用,就需要重新创造新的节点,浪费性能开销。

三:diff算法具体做了什么?

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

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

相关文章

来聊一个有趣的限流器RateLimiter

写在文章开头 这一篇我们来聊一个比较使用的限流工具RateLimiter,它是Google开源的Java类库guava中的一个工具类,本文将从使用和源码分析的角度介绍RateLimiter的设计与实现,希望对你有帮助。 Hi,我是 sharkChili ,是个不断在硬核技术上作死的 java coder ,是 CSDN的博客…

【MATLAB源码】机器视觉与图像识别技术示例报告2---铁道口夜间列车通过时速度视觉测量

系列文章目录在最后面&#xff0c;各位同仁感兴趣可以看看&#xff01; 速度视觉测量 摘要对铁路夜晚环境情况分析视觉测量的流程步骤代码问题最后&#xff1a;总结系列文章目录 摘要 随着科技技术的不断发展&#xff0c;由于铁道口夜间交通事故频发&#xff0c;传统的雷达和…

铁路购票系统中的数据库技术《二》

铁路购票系统中的数据库技术《二》 缓存技术&#xff1a;减轻数据库压力数据一致性&#xff1a;确保交易公平分布式事务&#xff1a;跨系统的数据一致性读写分离&#xff1a;优化查询性能数据库备份与恢复&#xff1a;确保数据安全安全性&#xff1a;保护sensitive数据性能优化…

基于Python的鸢尾花聚类与分类

1 导入必要的库 from sklearn.datasets import load_iris import pandas as pd import matplotlib.pyplot as plt import numpy as np import seaborn as sns from sklearn.cluster import KMeans from sklearn.metrics import silhouette_score, silhouette_samples from skl…

缓存和数据库双向写死一致性问题

我们可以对存入缓存的数据设置过期时间&#xff0c;所有的写操作以数据库为准&#xff0c;对缓存操作只是尽最大努力即可。也就是说如果数据库写成功&#xff0c;缓存更新失败&#xff0c;或者没有更新操作&#xff0c;那么只要达到过期时间&#xff0c;则后面的读者自然会从数…

图形编辑器基于Paper.js教程12:井身结构编辑器,多条完全平行的弯曲线,使用额外平行线来作为弯曲中心线的度量尺

背景 对于弯曲的三条平行线&#xff0c;一开始我以为只需要使用中心线&#xff0c;然后复制两条&#xff0c;一个向右下角平移&#xff0c;一个向左上角平移&#xff0c;就能让三条线实现完全平行&#xff0c;每一处的距离都相等。后来仔细思考后&#xff0c;发现我想错了&…

数据管道为什么选择Kafka作为消息队列?

目录 关于Kafka 什么是消息队列&#xff1f; Kafka的特点 管道为什么需要消息队列&#xff1f; 管道任务为什么选择Kafka作为消息队列&#xff1f; 企业在构建数仓和中间库时&#xff0c;由于业务数据量级较大&#xff0c;如果使用批量定时同步数据的方式很难做到高性能的增量同…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《考虑隐私保护的虚拟电厂内部交易决策优化 》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

食源送系统项目的测试

一、对整个系统编写测试用例 功能测试 性能测试 兼容性测试 易用性测试 安全测试 二、接口测试 针对接口的功能测试&#xff0c;也就是检验接口是否按照接口文档输入输出 2.1 使用Postman发送HTTP请求 2.2 使用Java TestNG 编写自动化测试用例 登录界面功能 package com.sky.…

碳化硅陶瓷膜的机械强度

碳化硅陶瓷膜是一种高性能的过滤材料&#xff0c;它采用重结晶技术在高温条件下烧结而成。这种膜的特点是整个结构&#xff0c;包括多孔支撑层、过渡层和膜层&#xff0c;均由碳化硅(SiC)材料构成。碳化硅陶瓷膜因其独特的性能而在多个领域得到广泛应用&#xff0c;下面是对碳化…

【面试题解答】一个有序数组 nums ,原地删除重复出现的元素

面试题解答 仅供学习 文章目录 面试题解答题目一、python代码1.1 代码1.2 示例用法1.2.1 示例11.2.2 示例2 二、讲解2.1 初始化2.2 遍历2.3 返回 题目 要解决这个问题&#xff0c;可以使用双指针方法进行原地修改&#xff0c;以确保每个元素最多出现两次。 一、python代码 1.1…

文件上传漏洞大总结:原理与复现

文章目录 原理f8x靶场安装文件上传漏洞前端验证概念步骤&#xff1a; 上传特殊可解析后缀概念步骤 ::$DATA绕过概念主要流类型 点空格绕过概念代码审计**步骤&#xff1a;** 文件类型检测概念常见的文件类型 过程 文件头检测概念过程 黑名单绕过概念特殊文件爆破常用的文件名过…

电商 API 接口的最佳实践与案例分析

在当今数字化的商业世界中&#xff0c;电商平台的发展日新月异&#xff0c;而 API 接口在其中扮演着至关重要的角色。通过合理地利用电商 API 接口&#xff0c;企业能够实现更高效的运营、更优质的用户体验以及更强大的业务拓展能力。本文将深入探讨电商 API 接口的最佳实践&am…

开源AI智能名片O2O商城微信小程序:利用超级赠品与厌恶损失心理促进行动转化的策略研究

摘要&#xff1a;在数字化转型的浪潮中&#xff0c;企业如何利用创新技术提升顾客转化率成为了关键议题。开源AI智能名片O2O商城微信小程序作为新兴营销工具&#xff0c;凭借其智能化、便捷性和个性化服务&#xff0c;为企业开辟了新的营销路径。本文聚焦于如何通过超级赠品与厌…

QQ 腾讯官方机器人搭建(更新中)

前言 QQ机器人通过开放的平台承载机器人的定制化功能&#xff0c;让开发者获得更畅快的开发体验。 以下是接入流程&#xff1a; 本文提供QQ机器人使用指南。 文章目录 前言开发前准备工作使用机器人控制台配置gpt—API获取本地公网ip配置机器人 开发前准备工作 首先前往Q…

高效可靠安全的大文件传输系统,了解一下

在数字化转型的浪潮中&#xff0c;数据已成为企业不可或缺的宝贵资源&#xff0c;而高效的文件传输机制则是保障数据流通的基石。无论是企业还是个人&#xff0c;经常需要处理大文件、远距离文件的传输任务&#xff0c;需要文件传输系统来处理。 在远距离传输大型文件时&#x…

一个简洁、高效、可扩展的企业级低代码开发平台,前后端分离,支持国密加密(附源码)

前言 在当今数字化转型的浪潮中&#xff0c;企业面临着快速开发和部署应用的挑战。传统的开发模式往往因为其繁琐的流程、高昂的成-本和僵化的架构而无法满足市场需求。开发者常常受限于复杂的系统配置、安全问题、以及不同数据库的兼容性问题。这些痛点不仅拖慢了开发进度&am…

字符串并查集:1061. 按字典序排列最小的等效字符串和990. 等式方程的可满足性

文章目录 题目一&#xff1a;1061. 按字典序排列最小的等效字符串题目二&#xff1a;990. 等式方程的可满足性 题目一&#xff1a;1061. 按字典序排列最小的等效字符串 1061. 按字典序排列最小的等效字符串 并查集使用整数&#xff0c;字符自然和整数有一个映射&#xff0c;A…

手把手教你用家用电脑完成图片生成卡通动漫风格

一. 效果图 二.animegan2-pytorch 介绍 animegan2-pytorch 是可以将图片转成卡通动漫形式的一个工程。 首先感谢作者开源&#xff0c;respect&#xff01;respect&#xff01;respect&#xff01; animegan2-pytorch地址&#xff1a;bryandlee/animegan2-pytorch: PyTorch impl…

【云原生】Kubernetes中关于污点、亲和性和容忍度的详细用法教程与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…