我们在进行列表渲染的时候，经常会需要给数组中的每一项指定一个 key，否则控制台会有警告，类似这种警告，Warning: Each child in a list should have a unique “key” prop.

那么问题来了，为什么需要指定 key？如何指定 key？key 的作用是啥？

首先，key 是虚拟 Dom 对象的标识，在更新显示时 key 有着十分重要的作用，当状态中的数据发生变化时，React 会根据新数据生成新的虚拟 Dom，随后 React 进行新的虚拟 Dom 与旧的虚拟 Dom 进行 diff 比较，规则如下：

• 旧虚拟 Dom 中找到了与新虚拟 Dom 相同的 key：
  
  《1》、若虚拟 Dom 中内容没变，直接使用之前的真实 Dom
  
  《2》、若虚拟 Dom 中内容变了，则生成新的真实 Dom，随后替换掉页面之前的真实 Dom
• 旧虚拟 Dom 中未找到与新的虚拟 Dom 相同的 key：
  根据数据创建新的真实 Dom，随后渲染到页面。

如何设定 key？

1、最好使用每条数据的唯一标识作为 key，如 id、手机号、身份证号、学号等唯一值。

2、如果只是简单的展示数据，则可以使用 index

key 需要满足的条件：

• key 值在兄弟节点之间必须是唯一的。 不过不要求全局唯一，在不同的数组中可以使用相同的 key。
• key 值不能改变，否则就失去了使用 key 的意义！所以千万不要在渲染时动态地生成 key。

在项目中我们经常会使用 index 作为 key，这除了有效率问题外，在多数情况下都不会引发界面效果问题，然而，在有些时候，key 确实会引发问题：

比如，在对数据进行逆序添加、逆序删除等破坏顺序的操作时，会产生没有必要的真实 Dom 更新，虽然界面上不会有啥问题，但是会有效率问题，在数据量少的时候不会有什么影响，但是如果数据量非常大的时候，影响就很大了。


再比如，页面结构中包含了输入类的 Dom，那么则会产生错误的 Dom 更新，导致界面出现问题