后端程序员入门react笔记——react的diff算法(三)

diffing算法

虚拟dom

我们知道,react里面操作的都是虚拟dom,最后经过render渲染为真正的dom,那么为什么要提出虚拟dom这个概念呢?其实就是将逻辑和视图区分开,react的虚拟dom,就相当于mvc的c,将数据逻辑和真正的dom区分开,我们知道,对于前端来说dom操作是非常昂贵的,性能消耗最大的就是dom操作。而virtual dom减少了对dom的操作,,不仅避免了资源浪费,而且页面的构建也得到了很大的提升。

为什么要diff

前面我们说了,应避免过多的操作dom,那么diff就是解决了这种问题。我们知道,react在状态发生变化的时候,会批量更新dom,生成新的UI,但是难道state的某一个值发生变化就要导致整个dom重新渲染吗?这明显是不科学的,为了解决这种问题,react提出了diff算法,通过对比新旧的两个虚拟dom树来检测那些dom是真的需要重新如安然,哪些dom是没有变化的。

diff算法

传统的diff算法是通过循环递归的方式对节点一次进行对比,需要O(n ^3)的时间复杂度。为什么?我们从最简单的说,把一棵树转换为另外一棵树,其实就是把一颗n个节点的树挨个儿去另一棵n个节点的树中查找,整个过程是n*n,那么如果发现有不同的地方,我们就需要需改,对一棵树的增删改的算法复杂度是n,那么整个过程就是n*n*n
在这里插入图片描述
react将这种对比策略做了一个优化,将复杂度降到了O(n),那么react是怎么实现的呢?react的diff会预设三个限制

  • 只进行同层级比较
  • 新旧节点的type不同,直接删除旧节点,创建新节点,比如组件不同,元素的类型不同,原来是ul,里面是li,后来改成了div+p,这个时候就会删除旧dom,创建新的dom.
  • 通过key来复用节点

在上面三个限制的基础上,对tree,conponent,element的处理方式又做了优化

  • dom节点不一致直接删除旧节点,创建新节点
  • 组件类型不一致直接删除组件下所有节点,创建新节点
  • 同一层的dom元素,以每个元素对应的key为标识,提供三种操作方式,删除新建和移动
    在这里插入图片描述

diff的最小颗粒度

diff的最小颗粒度是标签,我们举例看一下

class Hello extends React.Component {state={time:new Date()}componentDidMount(){this.timer=setInterval(()=>{this.setState({time:new Date()})},5000)}render() {console.log("i am render")return (<ul><li>备注:<input type="text"/></li><li><span>{this.state.time.toTimeString()}</span></li></ul>)}
}

我们看到,每隔5秒,span标签就会从新刷新一次,而其他元素没有变化
在这里插入图片描述

key

前面我们说了,同一层级的元素如果发生了变化,可以删除 插入和移动,前提是必须有key作为标识,如果没有key,比如下面代码

class Hello extends React.Component {state = {heros: [{id: 1,name: "张三"},{id: 2,name: "李四"}]}render() {console.log("i am render")return (<ul>{this.state.heros.map((hero,index)=>{return <li>{hero.name}</li>})}</ul>)}
}

这个时候浏览器提示了一个warm ,意思是每一个child都应该有唯一key。
在这里插入图片描述
那么这个key应该怎么选取呢

  • 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
  • 如果确定只是简单的展示数据,用index也是可以的。 但是不推荐。
    为什么不推荐index作为key,官方文档说,如果列表项目的顺序可能会变化,我们不建议使用索引来用作 key 值,因为这样做会导致性能变差,还可能引起组件状态的问题。

我们来举个例子对比一下,再分析问题所在。这段代码里,我点击添加按钮的时候,改变了原来数组对象的顺序,在数组的前头添加了一个对象,我们点击看一下效果

class Hello extends React.Component {state = {heros: [{id: 1,name: "张三"},{id: 2,name: "李四"}]}addHero=()=>{this.setState({heros: [{id: 3,name: "王五"},...this.state.heros]})}render() {console.log("i am render")return (<ul><button onClick={this.addHero}>点击添加王五</button><h1>index as key</h1>{this.state.heros.map((hero,index)=>{return <li key={index}>{hero.name}<input type="text" /></li>})}<h1>age as key</h1>{this.state.heros.map((hero,index)=>{return <li key={hero.id}>{hero.name}<input type="text" /></li>})}</ul>)}
}

在这里插入图片描述
我们发现了什么,以index做为key,input框并没有跟着往下移动,id作为key的往下移动了,我们发现问题了,那么为什么index作为key,input框不往下移动呢?就是因为数据的顺序发生变化了,王五被塞进了数组对象的头部,但是diff的时候,由于元素的key是index,还是从0开始的,并没有发生变化,所以input框并不会移动。

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

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

相关文章

【自然语言处理】:实验5,司法阅读理解

清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现&#xff08;实验满分&#xff09;&#xff0c;只展示主要任务实验结果&#xff0c;如果需要详细的实验报告或者代码可以私聊博主 有任何疑问或者问题&#xff0c;也欢…

激光条纹中心线提取算法FPGA实现方案

1 概述 激光条纹中心线提取是3D线激光测量领域一个较为基础且重要的算法。目前&#xff0c;激光条纹中心线提取已有多种成熟的算法&#xff0c;有很多相关的博客和论文。 激光条纹中心线提取的真实意义在于工程化和产品化的实际应用&#xff0c;而很多算法目前只能用于学术研究…

人工智能在抖音引流与IP人设打造实战

课程名称: 人工智能在抖音引流与IP人设打造实战 课程简介: 本课程将深入剖析人工智能(AI)在抖音平台引流策略与IP人设打造中的实战应用。通过理论与实践相结合,帮助学员掌握AI技术在抖音营销中的最新趋势和方法,从而有效提升个人或品牌在抖音上的影响力和粉丝互动。 课…

五、分类算法 总结

代码&#xff1a; from sklearn.datasets import load_iris, fetch_20newsgroups from sklearn.feature_extraction.text import TfidfVectorizer from sklearn.model_selection import train_test_split, GridSearchCV from sklearn.naive_bayes import MultinomialNB from s…

括号匹配(终极版)(典型栈的运用的题目,值得一看)

括号匹配时运用栈的一个典型例子&#xff0c;它是充分利用了栈先进后出的特性&#xff0c;在这之前&#xff0c;我们先来看一个简单的题目 括号匹配1 Description 输入一串带括号的表达式&#xff0c;判断输入的表达式是否合理。即判断括号是否匹配。为了简化题目&#xff0…

代码随想录KamaCoder46. 携带研究材料(第六期模拟笔试)

题目&#xff1a; 代码(首刷看解析 2024年2月22日&#xff09;&#xff1a; #include<vector> #include<iostream> using namespace std; int Pacakge(vector<int>& a,vector<int>& weights, vector<int>& values) {int M a[0];//…

js-cookie 的使用

安装 提示&#xff1a;这里可以几种方法都可以用 1.直接饮用cdn&#xff1a;<script src"https://cdn.jsdelivr.net/npm/js-cookie2/src/js.cookie.min.js"></script>2.本地下载下来后&#xff1a;<script src"/path/to/js.cookie.js">…

ElasticSearch语法

Elasticsearch 概念 入门学习: Index索引>MySQL 里的表(table)建表、增删改查(查询需要花费的学习时间最多)用客户端去调用 ElasticSearch(3 种)语法:SQL、代码的方法(4 种语法) ES 相比于 MySQL&#xff0c;能够自动帮我们做分词&#xff0c;能够非常高效、灵活地查询内…

【快速上手QT】04-定时器Timer

先来个小示例 我们先简单的来触发一下定时器。 #include "Zhetu.h"#include <qdebug.h>void Zhetu::timerEvent(QTimerEvent* event) { //定时器触发函数qDebug() << "Hello world"; }Zhetu::Zhetu(QWidget *parent): QMainWindow(parent){t…

C#,数值计算,矩阵的乔莱斯基分解(Cholesky decomposition)算法与源代码

一、安德烈路易斯乔尔斯基 安德烈路易斯乔尔斯基出生于法国波尔多以北的查伦特斯海域的蒙古扬。他在波尔多参加了Lyce e&#xff0c;并于1892年11月14日获得学士学位的第一部分&#xff0c;于1893年7月24日获得第二部分。1895年10月15日&#xff0c;乔尔斯基进入莱科尔理工学院…

量化粒度是什么???

目录 一、什么是量化粒度二、量化粒度方式三、总结 一、什么是量化粒度 量化粒度是指在模型量化中&#xff0c;对模型参数进行量化的级别。常见的量化粒度包括&#xff1a; Per-tensor 量化: 对每个 tensor 单独进行量化。 Per-layer 量化: 对每个 layer 的所有 tensor 共享…

解决采集时使用selenium被屏蔽的办法

解决采集时使用selenium被屏蔽的办法 实用seleniumbase uc模式 from seleniumbase import Driver driver Driver(ucTrue) # 使用UC模式UC模式是基于undetected-chromedriver 但做了一些优化更新&#xff0c;使用起来更方便 官方例子&#xff1a; from seleniumbase import …

关于音频编码标准AAC,Opus,MP3的概念、原理、优缺点

音频编码标准是用于压缩数字音频数据的技术规范&#xff0c;以减少存储和传输所需的带宽。以下是关于AAC、Opus和MP3这些音频编码标准的概念、原理、优缺点的简要描述&#xff1a; AAC (Advanced Audio Coding) 概念&#xff1a; AAC是一种音频编码标准&#xff0c;由MPEG-2和…

删除数组用delete和Vue.delete有什么区别

删除数组用delete和Vue.delete有什么区别&#xff1f; 在 JavaScript 中&#xff0c;delete 和 Vue.js 中的 Vue.delete 是两个完全不同的概念&#xff0c;它们在删除数组元素时的作用和效果也有所不同。 JavaScript 中的 delete 关键字&#xff1a; 在原生 JavaScript 中&a…

echarts实现表格图例

折线图的表格图例 <!--折线图--> <template><div class"title-container"><span class"title">{{typeof props.series string ? props.series : props.series.name}}</span></div><div v-if"props.series?…

PhotoSweeper X mac版 v4.8.5 相似重复照片清理工具 兼容 M1/M2

PhotoSweeper X for Mac是一款Mac重复照片/相似照片清理工具&#xff01;PhotoSweeper可以帮你进行&#xff1a;重复相似照片/数码相片查找、对比和删除&#xff0c;轻松清理Mac上的重复图片&#xff0c;非常实用。 应用介绍 PhotoSweeper X for Mac是一款Mac重复照片/相似照片…

实战打靶集锦-025-HackInOS

文章目录 1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查5. 提权5.1 枚举系统信息5.2 探索一下passwd5.3 枚举可执行文件5.4 查看capabilities位5.5 目录探索5.6 枚举定时任务5.7 Linpeas提权 靶机地址&#xff1a;https://download.vulnhub.com/hackinos/HackInOS.ova 1. 主机…

机器学习:训练模型后,发生了什么,最后得到什么

当你训练一个模型&#xff0c;尤其是在机器学习或深度学习的上下文中&#xff0c;实际上是在进行一系列计算和优化步骤&#xff0c;以便模型能够从提供的数据中学习。训练模型的过程大致如下&#xff1a; 1. 初始化模型参数 模型的参数&#xff08;如权重和偏置&#xff09;通…

【图片公式识别】图片公式转Word与LaTeX文档:智能识别与转换

前言 嘿&#xff0c;大家好呀&#xff01;&#x1f44b; 谁都知道&#xff0c;写 Word 文档里的公式可不是一件简单的事情&#xff01;你辛辛苦苦在键盘上敲出的数学公式&#xff0c;结果随着 Word 版本的更新&#xff0c;竟然变成了一张图片&#xff01;&#x1f624; 这简直就…