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 算 ...
随机推荐
- C++ Undefined Behavior 详细列表
Undefined Behavior,即未定义的行为,指程序不可预测的执行效果,一般由错误的代码实现引起.出于效率.兼容性等多方面原因,语言标准不便于定义错误程序的明确行为,而是将其统称为" ...
- 【JavaWeb】学习笔记——Ajax、Axios
Ajax Ajax 介绍 AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML AJAX 的作用: 与服务器进行数据交换:通过AJAX可以 ...
- 驱动开发:内核LDE64引擎计算汇编长度
本章开始LyShark将介绍如何在内核中实现InlineHook挂钩这门技术,内核挂钩的第一步需要实现一个动态计算汇编指令长度的功能,该功能可以使用LDE64这个反汇编引擎,该引擎小巧简单可以直接在驱 ...
- C# 窗体相关知识
一 窗体 固定窗体大小,并不能最大/最小化: FormBorderStyle属性设置为:FixedSingleMaximizeBox = falseMinimizeBox = false都是在For ...
- Fibonacci数列 与 杨辉三角
Fibonacci数列:除第一个与第二个数之外,其余数均由前两个数相加得到: 1, 1, 2, 3, 5, 8, 13, 21, 34, ... 通过生成器,程序如下: def fib(max): m ...
- Redisson源码解读-分布式锁
前言 Redisson是一个在Redis的基础上实现的Java驻内存数据网格(In-Memory Data Grid).Redisson有一样功能是可重入的分布式锁.本文来讨论一下这个功能的特点以及源 ...
- 修改服务器ssh端口
最近,访问公司虚拟机都需要通过堡垒机才能访问了,觉得麻烦.要想不受该规则限制,也有办法,可以通过修改虚拟机ssh端口解决. 下面做个介绍. 1. 通过堡垒机登录虚拟机 2. 修改虚拟机ssh端口 编辑 ...
- Oracle设置内存参数后,启动数据库报ORA-00843 ORA-00849解决办法
Oracle安装完成后,调优内存参数(MEMORY_TARGET和MEMORY_MAX_TARGET设置为0),重启数据库,报ORA-00843 ORA-00849错误. 根据提示,不应将MEMORY ...
- Linux环境下执行脚本重启Weblogic控制台中部署的应用程序
之前有写过一篇博文介绍切换登录方式的脚本,脚本中存在一个缺点:仍需手动去Weblogic控制台重启应用程序:本文即介绍如何在脚本中更新Weblogic控制台中部署的应用程序. 一.配置Weblogic ...
- 【Azure 事件中心】 org.slf4j.Logger 收集 Event Hub SDK(Java) 输出日志并以文件形式保存
问题描述 在使用Azure Event Hub的SDK时候,常规情况下,发现示例代码中并没有SDK内部的日志输出.因为在Java项目中,没有添加 SLF4J 依赖,已致于在启动时候有如下提示: SLF ...