【react】react18的学习(十一)– 底层原理(一)之 diff 算法

diff算法、fiber链表

步骤:(追求多复用,快渲染)

  • 首次渲染,缓存虚拟dom或fiber链表(17及以后);

  • 组件更新,将新生成的虚拟dom与已有的真实dom的fiber链表对比;

  • 遵循同级对比、深度对比原则,先依次找节点对比;

  • 对比过程中,第一轮对比:按链表顺序对比,节点key值相同进一步比较标签、内容,并进行标记;

  • 当发现节点key不同时,则第一轮结束,开始从头开始第二轮对比;

  • 第二轮对比,是新的虚拟dom从第一轮中断的位置开始与fiber链表的map映射表对比;

  • 第二轮对比是以新虚拟dom的顺序从第一轮中断的位置开始依次进行,不是与映射表相同索引节点比较,而是去映射表找相同key值的节点比较,并给映射表的节点做相应标记;

  • 最多两轮后,依次得到:要删除的8、要更新的或复用的4(只内容不同或相同)、要移动位置的6、要新增的2,不变的不做标记;

  • 处理:要删除的、不变的和复用的、移动的、新增的;

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

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

相关文章

【C语言+sqlite3 API接口】实现水果超市

实验内容: 假如我家开了个水果超市,有以下水果,想实现自动化管理,扫描二维码就能知道当前的水果状态,进货几天了, 好久需要再次进货,那些水果畅销,那些水果不畅销,那些水…

selenium查找svg元素

目录 如何为SVG元素编写XPath 使用local-name()的语法 需要记住的一点 将“and”与SVG元素一起使用 如何定位嵌套的SVG元素? XPath是一种用于定位XML文档中的web元素的语言,包括构成网页的HTML文档。在Selenium中&#xff0…

学习day48

事件的基本使用: 1.使用v-on:xxx或xxx绑定事件,其中xxx是事件名 2.事件的回调需要配置在methods对象中,最终会在vm上 3.methods中配置的函数,不要用箭头函数!否则this就不是vm了 4.methods中配置的函数&…

【计算机视觉】DINOv2(视觉大模型)代码四个不同模型的对比,以 28 * 28 的图像为例(完整的源代码)

文章目录 一、ViT-S/14二、ViT-B/14三、ViT-L/14四、ViT-g/14 一、ViT-S/14 import torch import torchvision.transforms as T import matplotlib.pyplot as plt import numpy as np import matplotlib.image as mpimg from PIL import Image from sklearn.decomposition im…

golang之json注释处理

场景 json 作为现代比较常用的文本格式,本身是不支持注释的,因为它的设计初衷是作为一种轻量级数据交换格式,只需要包含数据本身,而不应该包含注释或者其他无关的信息。 但是有时json内字段较多,想写一些注释说明,这些都是编程工具或者编辑器特有的功能,常见的注释如下…

ES系列--es进阶

一、系统架构 一个运行中的 Elasticsearch 实例称为一个节点,而集群是由一个或者多个拥有相同 cluster.name 配置的节点组成, 它们共同承担数据和负载的压力。当有节点加入集群中或者 从集群中移除节点时,集群将会重新平均分布所有的数据。 …

准备WebUI自动化测试面试?这30个问题你必须掌握(一)

本文共有8600字,包含了前十五个问题,如需要后十五个问题,可查看文末链接~ 1. 什么是WebUI自动化测试? WebUI自动化测试是指使用自动化测试工具和技术来模拟用户在Web用户界面(UI)上执行操作,并…

动态内存管理(C语言)

动态内存管理 1. 为什么存在动态内存管理2. 动态内存函数的介绍2.1 malloc函数和free函数2.2 calloc函数2.3 realloc函数 3. 常见的动态内存错误3.1 对NULL指针的解引用操作3.2 对动态开辟空间的越界访问3.3 对非动态开辟内存使用free函数3.4 使用free释放动态开辟内存的一部分…

C#窗口程序添加最大最小化

要在C#开发的窗口程序中添加最大化和最小化按钮,可以按照以下步骤进行操作: 打开窗口的设计视图,在窗口的标题栏上找到一个名为"ControlBox"的属性,将其设置为"True"。这将显示窗口的控制按钮,包…

android studio开发app实例

以下是一个简单的Android Studio开发App的实例: 1. 打开Android Studio,并创建一个新项目。 2. 选择一个适当的应用程序名称和包名称,然后选择目标API级别和默认Activity的模板。 3. 在MainActivity.java文件中,添加以下代码以…

git创建本地分支并关联远程分支

创建本地分支 git branch 分支名 例如:git branch dev,这条命令是基于当前分支创建的本地分支,假设当前分支是master(远程分支),则是基于master分支创建的本地分支dev。 2. 切换到本地分支 git checkout 分支名 例如&#xff1a…

Python爬虫——urllib_ajax的get请求爬取豆瓣电影前十页

ajax: 就是一段js代码,通过这段代码,可以让页面发送异步的请求,或者向服务器发送一个东西,即和服务器进行交互 对于ajax: 一定会有 url,请求方法(get, post),可能有数据一般使用 j…

京东自动化功能之商品信息监控是否有库存

这里有两个参数,分别是area和skuids area是地区编码,我这里统计了全国各个区县的area编码,用户可以根据实际地址进行构造skuids是商品的信息ID填写好这两个商品之后,会显示两种状态,判断有货或者无货状态,详情如下图所示 简单编写下python代码,比如我们的地址是北京市…

291. 单词规律 II(plus题)

给你一种规律 pattern 和一个字符串 s,请你判断 s 是否和 pattern 的规律相匹配。 如果存在单个字符到 非空 字符串的 双射映射 ,那么字符串 s 匹配 pattern ,即:如果 pattern 中的每个字符都被它映射到的字符串替换,那…

提高Djang查询速度的9种方法

引言 在Web应用程序中,数据库查询是一个关键的环节。优化数据库查询可以显著提高应用程序的性能和响应速度。Django作为一个高度可扩展的Web框架,提供了多种方式来优化数据库查询。本文将介绍一些常用的Django数据库查询优化技巧,从入门到精…

猿辅导推出颠覆性产品小猿学练机,加速个性化学习时代到来

近期,沉默近两年的猿辅导在智能硬件领域释放动作,发布旗下首款智能硬件产品——小猿学练机。这一动作代表着,猿辅导正式入局1000亿智能硬件市场。据了解,小猿学练机面向全国中小学生,主打学练一体、以练促学&#xff0…

Maven 项目构建生命周期

Maven 项目构建生命周期 一句话: Maven 构建生命周期描述的是一次构建过程经历了多少个事件 生命周期的3 大阶段 clean 清理工作 default 核心工作,例如编译,测试,打包,部署等 site 产生报告,发布站点等 生命周期…

Elasticsearch 介绍及java集成

一、Elasticsearch 基础介绍 ElasticSearch 是分布式实时搜索、实时分析、实时存储引擎,简称(ES), 成立于2012年,是一家来自荷兰的、开源的大数据搜索、分析服务提供商,为企业提供实时搜索、数据分析服务,…

“layui助力博客管理升级!用增删改查功能打造优质博客体验“

目录 引文1.前置条件2.数据接口2.1 UserDao(CRUD)2.2 R工具类 3.HTML 结构3.1 主界面的HTML3.2 用户的查询所有界面的HTML3.3 新增修改通用的的HTML 4.JavaScript 代码4.1 用户的CRUD javaScript 代码(userManage)4.2 新增修改的javaScript代码(userEdit) 5. 运行截图总结 引文…

【Spring 】执行流程解析:了解Bean的作用域及生命周期

哈喽,哈喽,大家好~ 我是你们的老朋友:保护小周ღ 今天给大家带来的是 Spring 项目的执行流程解析 和 Bean 对象的6 种作用域以及生命周期,本文将为大家讲解,一起来看看叭~ 本期收录于博主的专栏:JavaEE_保…