IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 2021-10-27 -> 正文阅读

[JavaScript知识库]2021-10-27

Vue,React中的key的原理

1.虚拟DOM中的key的作用:
		key是虚拟dom对象的标识,当状态中的数据发生改变时,Vue会根据【新数据】生成新的虚拟DOM,
		随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
				(1)旧虚拟DOM中找到了与新的虚拟DOM相同的key:
						<1>若虚拟DOM中的内容没变,直接使用之前的真实DOM
						<2>若虚拟DOM中的内容发生改变,则生成新的真实DOM,随后替换掉页面之前的真实DOM
				(2)旧虚拟DOM中没有找到与新虚拟DOM相同的key
						<1>创建新的真实DOM,随后渲染到页面
2.用index作为key可能会引发的问题:
		(1)若对数据进行:逆序添加,逆序删除等破坏顺序的操作:
				会产生没必要的数据真实DOM更新==>界面效果没问题,但是效率低
		(2)若结构中还包括输入类的DOM:
				会产生错误DOM更新==>界面没问题
2.开发中如何选择key:
		(1)最好使用每一条数据的唯一标识作为key,比如id,手机号,身份证号.....等唯一值
		(2)如果不存在对数据的逆序天剑,逆序删除等破坏顺序的操作,仅仅用于渲染列表用于展示,使用index作
		   为key也是没有问题的				   	  
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-28 12:18:13  更:2021-10-28 12:20:33 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年4日历 -2024/4/26 2:52:49-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码