关于diffing算法中key的使用

在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也是可以的

 

欢迎大家进行评论指正