在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也是可以的
欢迎大家进行评论指正