文章参考
初步认识
React 元素可以具有一个特殊的属性 key，这个属性不是给用户自己用的，而是给 React 自己用的。如果我们动态地创建 React 元素，而且 React 元素内包含数量或顺序不确定的子元素时，我们就需要提供 key 这个特殊的属性。
react-diff
这里react团队对传统diff算法优化主要基于三个策略:
1.相同层级的节点但DOM结构发生改变-----直接卸载并重新creat
2.相同层级节点但是DOM结构一样-----不会卸载,但是会update
3.所有同一层级的子节点.他们都可以通过key来区分-----同时遵循1.2两点
key相同
若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。
key值不同
则react先销毁该组件(有状态组件的componentWillUnmount会执行)，然后重新创建该组件（有状态组件的constructor和componentWillUnmount都会执行）
不建议使用索引来进行排序
我们可以思考下,key做为DOM节点标识,如果是前后两次arr分别为[1,2,3,4]和[5,6,7,8]和前后两次arr分别为[1,2,3,4]和[4,3,2,1]的情况,很明显前者可以认为是DOM改变了,后者可以认为是DOM节点的位移操作,那么对于第一种情况来说index作为key和没有key值无区别,但是第二种情况用index作为key值效果没有比用数据本身作为key值好。
key没有变化，只需要更新节点，而key变化了则需要删除和创建节点，对系统开销更大。
key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上
前面已经说过，react-diff是针对同一层级去比较，因此key的返回也是针对同一层级，所以我们只需要在同一层级唯一即可。
元素的key在他的兄弟元素之间应该唯一;数组元素中使用的key在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键
key会作为给React的提示，但不会传递给你的组件。
如果您的组件中需要使用和key相同的值，请将其作为属性传递：
const content = posts.map((post) =>
<post key="{post.id}" id="{post.id}" title="{post.title}">
);