react-列表和key

1、react列表中爲什麼需要指定key？

key 幫助 React 識別哪些元素改變了，比如被添加或刪除。因此你應當給數組中的每一個元素賦予一個確定的標識。

一個元素的 key 最好是這個元素在列表中擁有的一個獨一無二的字符串。通常，我們使用來自數據 id 來作爲元素的 key

當元素沒有確定 id 的時候，萬不得已你可以使用元素索引 index 作爲 key

如果列表項目的順序可能會變化，我們不建議使用索引來用作 key 值，因爲這樣做會導致性能變差，還可能引起組件狀態的問題。可以看看 Robin Pokorny 的深度解析使用索引作爲 key 的負面影響這一篇文章。如果你選擇不指定顯式的 key 值，那麼 React 將默認使用索引用作爲列表項目的 key 值。

要是你有興趣瞭解更多的話，這裏有一篇文章深入解析爲什麼 key 是必須的可以參考。

2、在何處指定key？

元素的 key 只有放在就近的數組上下文中才有意義。

比方說，如果你提取出一個ListItem組件，你應該把 key 保留在數組中的這個<ListItem />元素上，而不是放在ListItem組件中的<li>元素上。

例子：不正確的使用 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>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

例子：正確的使用 key 的方式

function ListItem(props) {
  // 正確！這裏不需要指定 key：
  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>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')

一個好的經驗法則是：在map()方法中的元素需要設置 key 屬性。