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 算 ...
随机推荐
- 忘记了99乘法表啥样的了,python打印下看看
for i in range(1,10): for j in range(1, i+1): if i == j: print(j, "x", i, "=", i ...
- 重新整理 .net core 实践篇 ———— linux 上线篇 [外篇]
前言 简单整理一个linux 简单上线. 这个是该系列的外篇,该系列继续更新.献给刚学的人. 正文 安装实例 dotnet new webapp -n AspNetCoreDemo -o firstw ...
- JAVA学习前准备
电脑常用快捷键 Ctrl+C:复制 Ctrl+V:粘贴 Ctrl+A:全选 Ctrl+X:剪切 Ctrl+Z:撤销 Ctrl+S:保存 Alt+F4:关闭窗口 Shift+delete:永久性删除文件 ...
- python tcp select 多路复用
1 #!/usr/bin/python 2 # -*- coding: UTF-8 -*- 3 # 文件名:tcpserver.py 4 5 import socket 6 import time 7 ...
- nodered获取简单的时间
1.添加simpletime 的节点 2. 添加一个inject节点用来每1s循环获取当点的信息 3.添加一个函数节点对simpletime发来的msg进行解析 var payload=msg;var ...
- ES6学习笔记(十四)module的简单使用
1.前言 module模块机制是es6新引入的,它解决了作用域的问题,使代码更加规范和结构化. 下面简单的使用一下. 2.基本使用 2.1 模块和脚本的区别 模块代码运行在严格模式下,并且没有任何办法 ...
- .NET周报【11月第1期 2022-11-07】
国内文章 开源·安全·赋能 - .NET Conf China 2022 https://mp.weixin.qq.com/s/_tYpfPeQgyEGsnR4vVLzHg .NET Conf Chi ...
- Git安装与常用操作
Git作为一个版本控制工具,使用前需进行下载安装:可自行到官网下载. 一.安装(windows) 1.双击下载好的文件进行安装,弹窗中点击"next" 2.默认勾选,继续点击&qu ...
- Go语言核心36讲13
我们已经讨论过了通道的基本操作以及背后的规则.今天,我再来讲讲通道的高级玩法. 首先来说说单向通道.我们在说"通道"的时候指的都是双向通道,即:既可以发也可以收的通道. 所谓单向通 ...
- TCN代码详解-Torch (误导纠正)
TCN代码详解-Torch (误导纠正) 1. 绪论 TCN网络由Shaojie Bai, J. Zico Kolter, Vladlen Koltun 三人于2018提出.对于序列预测而言,通常考虑 ...