React 中 keys 的作用是什么？

了解React中的keys

• keys是React在进行列表操作（修改，添加或者删除）的辅助标识，类似于数据库中所使用的索引或者id，可以快速找到list中改变的元素，节省开销
• 它是一个特殊的属性，不是给开发者使用的，而是给react自己用的
• 在同一个列表中，key值不能重复出现
• 对keys的设计有点像是空间换时间，多写了一点代码，但是大幅提升了性能，触类旁通，在平时编程的其它方面也可以使用类似的做法，比如有时候我们需要给对象数组的对象上添加一些额外的属性以提高某些操作的性能以及便捷性

注意点

1. key是React中使用的一种特殊的属性（除此之外还有ref属性），当元素被创建的时候,React会将元素的key值和对应元素绑定存储起来。
2. 尽管key看起来像是props的一部分,可是事实上我们无法通过this.props.key获取到key的值，React会在判断元素更新的时候自动使用key，而组件自己是无法获取到key的。
3. 当一个列表被重新渲染时,React会根据较新的元素内容依据相应的key值来匹配之前的元素内容。
4. 当一个新的key值添加到列表中时,表示有一个组件被创建;被删除时表示有一个组件被销毁。
5. Key值可以让React明确标识每个组件,这样在重新渲染的时候保有对应的状态数据。
6. 如果你去改变某个组件的key值的话,它会在下次渲染的时候被销毁并当作新的组件重新渲染进来。

Key的使用场景

1. 在列表中更新（增删查改）列表项的时候,React需要知道到底是哪一个列表项进行了改变。
2. 在动态创建React元素的时候,而且React元素内包含数量或顺序不确定的子元素时,就需要提供key这个特殊的属性。

推荐阅读

• 官方文档