React的key

react中的key的选择
父元素下面的子节点之间需要设置一个唯一的key值，方便diff算法计算。Key 应该具有稳定，可预测，以及列表内唯一的特质，一般使用一个唯一的id作为key值。还有元素的index，或者随机值，偶尔也会被用作key值，这几种key值的比较如下。

官方推荐使用元素的id作为key值，diff算法比较同级节点会通过这个唯一的key值做计算。

当元素的id没有确定时候，万不得已你可以使用元素索引 index 作为 key。这个策略在元素不进行重新排序时比较合适，如果有顺序修改，会导致性能变差，还可能引起组件状态的问题。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。

当基于下标的组件进行重新排序时，组件 state 可能会遇到一些问题。由于组件实例是基于它们的 key 来决定是否更新以及复用，如果 key 是一个下标，那么修改顺序时会修改当前的 key，导致非受控组件的 state（比如输入框）可能相互篡改，会出现无法预期的变动。

通过Math.random()生成的key值具有不稳定性，会导致致许多组件实例和 DOM 节点被不必要地重新创建，这可能使得性能下降和子组件中的状态丢失

1.错误的指定key

2.正确设置key

数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值。