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 算 ...
随机推荐
- Django之同时新增数据到两个数据库表与同时返回两个表的数据(插拔式)
models:比如有以下三个模型 from django.db import models """ 基类,其他类继承即可获得对应的字段 """ ...
- 齐博x1文本代码标签的使用
文本标签虽然简单,但是使用的地方确实非常多的. {qb:tag name="XXXX" type="text"}推荐新闻{/qb:tag} 类似这种使用的频率是 ...
- 使用react+redux实现弹出框案例
redux 实现弹出框案例 实现效果,点击显示按钮出现弹出框,点击关闭按钮隐藏弹出框 新建弹出框组件 src/components/Modal.js, 在index.js中引入app组件,在app中去 ...
- 七、kubernetes污点和容忍
Kubernetes污点和容忍 一.Taint 和 Toleration介绍 节点亲和性,是 pod 的一种属性(偏好或硬性要求),它使 pod 被吸引到一类特定的节点.Taint 则相反,它使节点能 ...
- 四、redis数据类型
四.redis数据类型 redis可以理解成一个全局的大字典,key就是数据的唯一标识符.根据key对应的值不同,可以划分成5个基本数据类型. 1. string类型: 字符串类型,是 Redis 中 ...
- 几个实用 shell 脚本
1. Dos攻击防范(自动屏蔽攻击 IP) #!/bin/bash DATE=$(date +%d/%b/%Y:%H:%M) LOG_FILE=/usr/local/nginx/logs/demo2. ...
- Hexo多台电脑同步
如果换了电脑该如何同步Hexo的源文件?把hexo文件从一个电脑cope到另外一个电脑吗?答案肯定不是这样的,因为这里面有好多依赖包,好几万个文件呢,这样显然不合理. 本文提供一种多台电脑同步源文件的 ...
- SpringBoot 自动装配原理
早期的Spring项目需要添加需要配置繁琐的xml,比如MVC.事务.数据库连接等繁琐的配置.Spring Boot的出现就无需这些繁琐的配置,因为Spring Boot基于约定大于配置的理念,在项目 ...
- CC3
cc_link_three 0x00前言 这里要单独学cc链子三是因为它的调用方式不是执行命令而是代码执行,是一种动态类加载机制来执行代码,然后类加载的时候要用类加载器 0x01开整 首先明白调用机制 ...
- 7、将字符串数组s2中全部字符复制到字符数组s1中,不用strcpy函数
/* 将字符串数组s2中全部字符复制到字符数组s1中,不用strcpy函数 */ #include <stdio.h> #include <stdlib.h> void str ...