react中的key的选择
父元素下面的子节点之间需要设置一个唯一的key值，方便diff算法计算。Key 应该具有稳定，可预测，以及列表内唯一的特质，一般使用一个唯一的id作为key值。还有元素的index，或者随机值，偶尔也会被用作key值，这几种key值的比较如下。
一. 几种key值的比较
1.元素的id
官方推荐使用元素的id作为key值，diff算法比较同级节点会通过这个唯一的key值做计算。
2.元素的索引-index
当元素的id没有确定时候，万不得已你可以使用元素索引 index 作为 key。这个策略在元素不进行重新排序时比较合适，如果有顺序修改，会导致性能变差，还可能引起组件状态的问题。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。
当基于下标的组件进行重新排序时，组件 state 可能会遇到一些问题。由于组件实例是基于它们的 key 来决定是否更新以及复用，如果 key 是一个下标，那么修改顺序时会修改当前的 key，导致非受控组件的 state（比如输入框）可能相互篡改，会出现无法预期的变动。
3.Math.random()
通过Math.random()生成的key值具有不稳定性，会导致致许多组件实例和 DOM 节点被不必要地重新创建，这可能使得性能下降和子组件中的状态丢失
二.key的设置
1.元素的 key 只有放在就近的数组上下文中才有意义。
1.错误的指定key
function ListItem(props) {
const value = props.value;
return (
// 错误！你不需要在这里指定 key：
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = [1,2,3,4];
const listItems = numbers.map((number) =>
// 错误！元素的 key 应该在这里指定：
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
2.正确设置key
function ListItem(props) {
// 正确！这里不需要指定 key：
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = [1,2,3,4];
const listItems = numbers.map((number) =>
// 正确！key 应该在数组的上下文中被指定
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
2.key 只是在兄弟节点之间必须唯一
数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值。
