不使用map的index作为key值
在前端开发过程中,不论是Vue框架还是React,当使用for循环往DOM树添加元素时,都会要求key值。
之前我还不清楚为什么需要key,只知道是性能问题,然后看了一下React官方的一份文档:深入解析为什么key是必须的。才开始注意key值的使用。
但是在使用key值的时候偷懒不想给数组添加id,所以直接使用map循环的index,是不是觉得高效方便啊?还能去除烦人的警告和报错。然而最近又钻了一下,发现如果直接使用index是有错误的。
key值是框架用来判断DOM树更新的唯一依据。但是如果直接使用index作为key的话,会出现以下的错误:
const arrOne = [2,5,6,7,23]
const arrMap = arrOne.map((item, index) => {
console.log('key:',index, item);
return item
});
// key:0 2
// key:1 5
// key:2 6
// key:3 7
// key:4 23
// 如果在数组7后插入新元素,使之成为:[2,5,6,7,8,23],那么输出应为:
// key:0 2
// key:1 5
// key:2 6
// key:3 7
// key:4 8
// key:5 23
据说第四的key是没有变化的,还是4,所以此时DOM树就会认为这一项是不变的,并不会更改成为8,只会在元素下面再插入一条23.