React的key

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 值。