react,vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中的key的作用:
key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较。
2.比较规则
(1)旧虚拟dom中找到了与新虚拟dom相同的key:
若虚拟dom中内容没变,直接使用之前的真实的dom
若虚拟dom内容变了,则生成新的真实的dom,随后替换掉之前的真实的dom
(2)旧虚拟dom中未找到与新虚拟dom相同的key创建新的真实的dom,随后渲染到页面。
3.用index作为key可能会引发的问题:
(1)若对数据进行逆序添加,逆序删除hi破坏顺序操作,会产生没有必要的真实的dom更新==》界面效果没问题,但效率低。
(2)如果结构中还包含输入类的dom:会产生错误dom更新==》界面有问题
4.开发中如何选择key?
(1)使用唯一标识key。如id,手机号,邮箱号,身份证号,学号等。
react,vue中的key有什么作用?(key的内部原理)的更多相关文章
- vue中动态样式不起作用? scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
- vue中 给router-view 组件的 绑定 key 的原因
不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...
- vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...
- webapck搭建环境,让你知道vue中的h函数的作用和虚拟节点如何上树!
搭建环境 npm init 初始化项目 npm i -D snabbdom 安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 简单介绍 ...
- 关于vue中this.attr代替this.data.attr访问的原理
请看如下例子: var obj = { name:"zhuwei", age:18 } function Person(data){ this.data = data; } var ...
- VUE中/deep/深度作用域
vue中css样式不起作用,用!important也不起作用,此时需要用 /deep/ ,没加之前是 加了之后起作用了,此时这个deep是深度作用域
- vue中的.passive修饰符
一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...
- Vue 中为什么要有nextTick?
摘要:本文将浅析nextTick的作用.使用场景和背后的原理实现,希望对大家有所帮助. 本文分享自华为云社区<Vue 中的 nextTick 有什么作用?>,作者:CoderBin. 一. ...
- vue中的v-model原理,与组件自定义v-model
VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...
- vue、react中循环遍历为什么会有key,key有什么作用?
先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...
随机推荐
- vue Excel导入,下载Excel模板,导出Excel
vue Excel导入,下载Excel模板,导出Excel vue Excel导入,下载Excel模板 <template> <div style="display: ...
- ubuntu 基本指令
系统相关 df: disk free 用以显示系统上文件系统磁盘的使用情况 # 以M/G单位显示硬盘空间大小 df -h apt: advanced packaging tool 包管理工具 apt ...
- docker构建容器时 容器内使用代理
build 容器时 使用代理 demo1 使用前 指定 env 使用后 记得 清空, 否则 会影响 使用容器 时的 网络 cat dockerfile --> FROM jenkins/jenk ...
- MySQL 是怎么加行级锁的?为什么一会是 next-key 锁,一会是间隙锁,一会又是记录锁?
大家好,我是小林. 是不是很多人都对 MySQL 加行级锁的规则搞的迷迷糊糊,一会是 next-key 锁,一会是间隙锁,一会又是记录锁. 坦白说,确实还挺复杂的,但是好在我找点了点规律,也知道如何如 ...
- 2022ICPC区域赛参后感悟
第一次参加正式的大类赛事,在某种程度上挺激动的.我呢,可以说是刚步入竞赛一年,在此期间遇见了一些志同道合的朋友,最重要的是遇见了我的队友. 开始前,我幻想过我们小队可以超常发挥,拿取学校中第一个区域赛 ...
- 使用 Go HTTP 框架 Hertz 进行 JWT 认证
前言 上一篇文章简单介绍了一个高性能的 Go HTTP 框架--Hertz,本篇文章将围绕 Hertz 开源仓库的一个 demo,讲述如何使用 Hertz 完成 JWT 的认证与授权流程. 这里要说明 ...
- gin-巧用Context传递多种参数
目录 引言: 1.巧妙包装gin.Context为NewContext 2 在使用gin.Use对每一个请求的Context进行组装 3 在路由绑定时解析出NewContext来为应用层函数提供参数, ...
- 硬核!Apache Hudi Schema演变深度分析与应用
1.场景需求 在医疗场景下,涉及到的业务库有几十个,可能有上万张表要做实时入湖,其中还有某些库的表结构修改操作是通过业务人员在网页手工实现,自由度较高,导致整体上存在非常多的新增列,删除列,改列名的情 ...
- 第2-4-5章 规则引擎Drools高级语法-业务规则管理系统-组件化-中台
目录 6. Drools高级语法 6.1 global全局变量 6.2 query查询 6.3 function函数 6.4 LHS加强 6.4.1 复合值限制in/not in 6.4.2 条件元素 ...
- 求10以内所有偶数和-Java
public class Demo{ //求10以内所有偶数和 public static void main (String[] args){ int sum = 0; for(int i = 0; ...