不使用map的index作为key值

不使用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.