渲染列表时，什么是键，它的目的是什么？

在渲染列表时，键是指一个能够唯一标识列表中每个元素的值。在React中，用数组的map()方法来渲染列表。在这个方法中，每个元素必须包含一个键，以便React能够跟踪它们的变化。

键的目的

React使用键标识列表中每个元素，以便在进行插入、删除或移动操作时能够追踪它们的更改。没有键，React就不能准确地知道哪个元素是哪一个，并且可能会出现一些不可预料的问题。

为什么需要键？

考虑一个简单的列表渲染示例：

const myList = ['apple', 'banana', 'orange'];
const listItems = myList.map((item) =>
  <li>{item}</li>
);

React将会生成以下HTML代码：

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

看起来似乎没有问题。但是，如果我们现在尝试删除列表中的一个元素：

myList.splice(1, 1); // 删除 banana

然后重新渲染列表，React会生成以下HTML代码：

<ul>
  <li>apple</li>
  <li>orange</li>
</ul>

看起来很好，但是我们忽略了一个重要的问题：React不知道哪个元素被删除了。它只知道整个数组已经改变了。因此，它将完全重新渲染整个列表，这可能会影响应用程序的性能。

这就是为什么需要键的原因。它们提供了一种唯一标识列表中每个元素的方法，以便React可以更准确地跟踪它们的更改。

如何设置键？

设置键非常简单。您只需使用React提供的关键字“key”，并为每个元素提供唯一的标识符，如下所示：

const myList = ['apple', 'banana', 'orange'];
const listItems = myList.map((item, index) =>
  <li key={index}>{item}</li>
);

在这个示例中，我们将元素的索引作为键。但是，并不总是这么简单。键必须是一个能够唯一标识该元素的值。在实际情况中，您可能需要使用一些ID或其他唯一标识符。

总结

在渲染列表时，设置键是必需的。它们提供了一种唯一标识每个元素的方法，以便React可以准确地跟踪它们的更改。设置键非常简单，您只需要使用React关键字“key”，并为每个元素提供唯一的标识符。