首页 技术 正文
技术 2022年11月23日
0 收藏 528 点赞 3,037 浏览 919 个字

在vue和react中(只学了这两个),经常需要渲染元素到DOM上,而且如果不写key,有的浏览器会进行报错或者进行提示。

在我的理解里:key其实就是一个身份的标识,证明这个位置坐的就是这个人。后期其他的人来到后坐其他的位置,这样就不影响自身的位置,从而不用重新确认。

用比较官方的话说就是,当状态的数据发生变化时,框架中的diff算法会根据新数据生成新的 虚拟DOM ,与原先的旧虚拟DOM进行比较:

第一种:在旧的虚拟DOM内找到和新的虚拟DOM相同的key

  (1)对比后发现虚拟DOM的中的内容没有变化,直接使用之前的真实DOM

  (2)若新的虚拟DOM的内容变化了,则生成新的真实DOM,替换之前生成真实DOM

第二种:旧的虚拟DOM未找到和新的虚拟DOM相同的key

    根据新数据创建新的真实DOM,渲染到界面上

但是这里就引发了一个问题,为何不建议用随机数和index作为标识呢?此处写的是不建议,不是不能用!

用index作为key会发生的问题:

1.对数据进行 逆向添加,逆向删除等破坏顺序的操作:

直接导致index的顺序重新排列,使得整个数据重新进行真实DOM更新,举个例子

在2000条数据内,往头节点插入一条数据,这时候原本头节点的index为0,现在变成了1,新增加的数据的index为0,在diff算法中发现所有的index所对应的数据都不对,从而进行2001条数据渲染,而不是只对当前这一条新增数据进行真实DOM添加,影响开发的效率

2.结构类中包含输入类的DOM

会导致输入框的数据出错,再次(点击添加输入框操作等)渲染数据时,发生输入框的数据错乱

用随机数作为key的问题:

如果从上面看下来的话,其实为什么不用随机数的问题也很好解决,用随机数会让数据更新时,每次都整体重新渲染,大大降低了效率问题

后话

如果我们不存在对数据的逆向添加这些破坏顺序的操作,就是为了展示的话,用index作为key也是可以的,这也就是为什么前面说不建议而不是不能

那么怎么使用key进行数据标识呢?

1)如果要设置唯一标识的话,此处的key可以设置成id,手机号,身份证号,学号等唯一值

2)如果只是为了展示数据,用index也是可以的

欢迎大家进行评论指正

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,964
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,486
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,331
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,114
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,747
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,781