React 中的 Key，你不可忽视的小帮手

前端

2024-02-02 01:27:27

React 是一个流行的 JavaScript 库，用于构建用户界面。它采用虚拟 DOM 的方式来提高性能，这使得它可以轻松地更新视图，而无需重新渲染整个页面。但是，当你在使用 React 来渲染列表或数组时，你可能会遇到一个警告：

"Each child in a list should have a unique 'key' prop."

这个警告提醒你应该为列表中的每个子项指定一个唯一的 key。Key 是一个特殊属性，它可以帮助 React 跟踪列表项的变化。当列表项发生变化时，React 只需要更新发生变化的列表项，而无需重新渲染整个列表。

那么，为什么 Key 如此重要呢？

提高性能：通过使用 Key，React 可以更有效地更新列表项，从而提高应用程序的性能。
防止错误：如果不使用 Key，React 可能会在更新列表项时出错。这是因为 React 无法确定哪个列表项发生变化，因此它可能会错误地更新列表项。
帮助 React 识别列表项：当列表项发生变化时，React 需要能够识别哪个列表项发生了变化。Key 可以帮助 React 识别列表项，从而确保它只更新发生变化的列表项。

如何为 React 列表项添加 Key

为 React 列表项添加 Key 非常简单。你只需要在列表项的 JSX 代码中添加一个 key 属性。例如：

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

const listItems = items.map((item) => (
  <li key={item.id}>
    {item.name}
  </li>
));

ReactDOM.render(
  <ul>
    {listItems}
  </ul>,
  document.getElementById('root')
);