面试题:react、 vue中的key有什么作用? （key的内部原理)
面试题:react、 vue中的key有什么作用? （key的内部原理)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DON】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
- .若虚拟DOM中内容没变,直接使用之前的真实DOM !
- .若虚拟DON中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM.
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到到页面。
3．用index作为key可能会引发的问题:
1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
2．如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。
4．开发中如何选择key? :
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,使用index作为key是没有问题的。
相关文章：
面试题:react、 vue中的key有什么作用? （key的内部原理)
面试题:react、 vue中的key有什么作用? （key的内部原理) 1.虚拟DOM中key的作用: key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DON】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较࿰…...
C++之继承
目录 一、继承的概念及定义 1.1继承的概念 1.2继承的定义 1.2.1继承的格式 1.2.2继承基类成员访问方式的变化 二、基类和派生类对象赋值转换 三、继承中的作用域 4.派生类的默认成员函数 五、继承与友元 六、继承与静态成员 七、菱形继承及菱形虚拟继承 7.1菱形继承的问…...
轻松掌握！Pandas的数据添加技巧，3秒学会更高效的方法
在Pandas中，如果你想高效地向一个DataFrame添加一行数据，千万不要使用.append()方法！因为这种方法需要创建新的对象然后再赋值，效率较低，尤其是DataFrame较大时。 本文将介绍3种Pandas添加一行数据更高效的方法&#x…...
层次结构工程命名建议
对于这种多层次的结构，我们可以采用一些通用的命名方式来描述不同的层次。以下是一种可能的方式，仅供参考： 第一层：模块/模块组件 可以采用名词或形容词名词的方式来命名，例如： Action: 动作Behavior: 行…...
Google Play应用广告该如何运作
Google 应用广告是一种付费广告渠道，可以帮助我们把应用推向特定的目标受众。比如可以使用应用安装广告，用来吸引用户安装我们的应用，我们可以选择手动设置出价和定位，或使用 Google Ads 自动设置目标和出价。 Google 在创建和投…...
Java版电子招投标系统源码之了解电子招标投标全流程
随着各级政府部门的大力推进，以及国内互联网的建设，电子招投标已经逐渐成为国内主流的招标投标方式，但是依然有很多人对电子招投标的流程不够了解，在具体操作上存在困难。虽然各个交易平台的招标投标在线操作会略有不同࿰…...
能源设备智能维修AR远程作业指导平台降低运营成本
AR远程专家指导系统是一种基于AR增强现实技术搭建的远程协作解决方案，它可以让专家全视角掌握操作现场，并将专精知识和技能传递给远程现场的工作人员，以帮助他们解决各种技术难题和困难，赋能各行各业行业。 现场人员通过手机、平板…...
【实验笔记】深度学习中的确定性Uncertainty in Deep Learning（资料汇总，不断更新）
现在我们传统深度学习算法几乎只能给出一个特定的结果，而不能给出模型自己对结果有多么confident. 的确，在分类问题中，我们会在网络的最后一层添加一个softmax函数来获得概率，但是模型仍然无法表示自己对结果不确定。 资料&#…...
第七章 Bash 操作
第七章 Bash 操作 一、 何谓 Bash Bash（Bourne Again shell）,是目前 Linux 上最流行的 Shell。 Shell，命令语言解释器（command-language interpreter） Bash 相当于 DOS 系统的 Command.exe。 Linux 上还有一些较流…...
JS知识点
1、其他值到字符串的转换规则？ - Null和Undefined类型，null转化为 null ,undefined转化为‘undefined’ - Boolean类型，true转化为‘true’，false转化为 ‘ false’ - Symbol类型的值直接转换，但是只允许显示强制类…...
FFmpeg YUV 编码 H264
1. x264 库 由于 FFmpeg 不支持 h264 编码，所以需要集成 x264 库，现在使用的是当前最新版本 1.1 官方下载地址: videolanhttps://www.videolan.org/developers/x264.html 1.2 编译脚本地址: x264-ioshttps://github.com/kewlbear/x264-ios 1.3 将下载的 x264 库和 x264...
cuda-trt 学习
https://github.com/jinmin527/learning-cuda-trt learning-cuda-trt A large number of cuda/tensorrt cases在这个project中，提供大量的cuda和tensorrt学习案例cuda驱动apicuda运行时apitensorRT基础入门 基本的tensorRT学习插件、onnx解析器 tensorRT高阶应用 …...
Spot CEO：我们为什么选择Babylon.js而不是Three.js
为现代网络开发令人兴奋的事情之一是底层平台的快速发展。 WebAssembly、WebGL、WebGPU、Web Worker 等正在解锁以前典型 Web 产品无法想象的体验。 在过去的几年里，我们看到像 Figma 这样的产品利用这一点创造了极具吸引力的业务和产品。 推荐：用 NSDT设…...
arm安装pyrealsense
arm安装pyrealsense – Step 1 – conda install numba pip install opencv-python pip install scipy – Step 2 pyrealsense2 – 参考 https://github.com/35selim/RealSense-Jetson 编译安装pyrealsense2 git clone -b v2.50.0 --depth1 https://github.com/IntelRealSens…...
day36_jdbc
今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、JDBC 二、登录 三、ORM 零、 复习昨日 sql语言：DDL DML DQL DCL create table 表名(id int primary key auto_increment,sname varchar(2…...
C++好难（6）：模板初阶
【本节目标】 1. 泛型编程2. 函数模板3. 类模板 目录 【本节目标】 1.泛型编程 2.函数模板 概念： 格式： 原理： 实例化： 1.隐式实例化： 2.显式实例化 原则一： 原则二： 原则三&#…...
Windows 10字体模糊发虚! 如何解决?
在使用Windows 10操作系统的过程中，有些用户可能会遇到字体模糊、发虚的问题，这给用户的视觉体验带来了不小的困扰。本文将介绍几种解决Windows 10字体模糊发虚问题的方法。 一、更新显卡驱动程序 如果更新显卡驱动程序后问题仍未解决，那么很…...
Spring中的Bean和Bean的生命周期
在Spring中，Bean是被管理的对象，是应用程序的基本组件。Bean的生命周期包括Bean的创建、初始化、使用和销毁。在本文中，我们将介绍Spring中Bean的概念，如何创建和管理Bean以及Bean的生命周期。 Bean的概念 在Spring中࿰…...
嘉兴桐乡技能培训提升-如何提高工作效率
现在的工作基本上都离不开电脑，所以大家几乎天天都在跟电脑打交道，那么这些电脑使用技巧你知道多少呢？今天桐乡办公软件培训沈老师就给大家分享一下： 如何让“自动更正”输入统一的文本 你是不是经常为输入某些固定的文本&#x…...
SystemFunction032函数的免杀研究
什么是SystemFunction032函数？ 虽然Benjamin Delphi在2013年就已经在Mimikatz中使用了它，但由于我之前对它的研究并不多，才有了下文。 这个函数能够通过RC4加密方式对内存区域进行加密/解密。例如，ReactOS项目的代码中显示&…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...