【2022.9.5】React当中的key

[lkzwc]

key存在的意义

当界面的UI发生变化的时候，react会成成一个mutation，而react在比对的过程中不能准确的找到该节点是原来的还是需要直接重新生成的，于是就诞生了key

react 使用key 匹配原来树上的子元素以及最新树上的子元素

key的错误用法

function ListItem(props) {
  const value = props.value;
  return (
    // 错误！你不需要在这里指定 key：
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 错误！元素的 key 应该在这里指定：
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

// 正确的用法

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 正确！key 应该在数组的上下文中被指定
    <ListItem key={number.toString()}      value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

一个好的经验是在map方法中的元素需要设置key
也可以使用元素在数组中的下标作为 key。这个策略在元素不进行重新排序时比较合适，如果有顺序修改，diff 就会变慢。