1、key的作用
react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。
简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。
key不是用来提升react的性能的，不过用好key对性能是有帮助的。
2、key的使用场景
在项目开发中，key属性的使用场景最多的还是由数组动态创建的子组件的情况，需要为每个子组件添加唯一的key属性值
另外，还有一种比较常见的场景：为一个有复杂繁琐逻辑的组件添加key后，后续操作可以改变该组件的key属性值，从而达到先销毁之前的组件，再重新创建该组件。
3、key的最佳实践
index作为key是一种反模式
在list数组中，用key来标识数组创建子组件时，若数组的内容只是作为纯展示，而不涉及到数组的动态变更，其实是可以使用index作为key的。
但是，若涉及到数组的动态变更，例如数组新增元素、删除元素或者重新排序等，这时index作为key会导致展示错误的数据。
所以在做数组新增元素、删除元素或者排序的时候不要使用index作为key，可以用后端提供过来的唯一值 ID
得出结论
在数组中生成的每项都要有key属性，并且key的值是一个永久且唯一的值，即稳定唯一，所以key的值要稳定唯一，但不能使用random来生成key的值
Math.random随机生成，虽然能够保持其唯一性，但是它的值是随机而不是稳定的，在数组动态改变时会导致数组元素中的每项都重新销毁然后重新创建，有一定的性能开销；另外可能导致一些意想不到的问题出现。
所以：
key的值要保持稳定且唯一，不能使用random来生成key的值。
4、key的其他注意事项
key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上。
key值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的key都要保持唯一
不仅仅在数组生成组件上，其他地方也可以使用key，主要是react利用key来区分组件的，相同的key表示同一个组件，react不会重新销毁创建组件实例，只可能更新；key不同，react会销毁已有的组件实例，重新创建组件新的实例。
自学，知识点记录。
参考博客
网友评论