普通组件映射VS时React中的按键

Question

为什么在下面的代码中：

<ul>
  <li>abc</li>
  <li>def</li>   // works fine
</ul>

我们不需要

key

，React 不会抛出任何警告，一切都会顺利进行。

但是

以下示例：

<ul>
  {['abc', 'def'].map((item) => <li key={item}>{item}</li>)}  // throws warning if no key
</ul>

我们确实需要

key

，否则React会抛出警告。

映射的 li

 组件和普通 

li

 组件有什么区别

？

为什么映射

li

需要密钥？正常

li

不？

Answer 1

使用map功能时，您可以为每个元素分配一个唯一的键属性。 key 属性有助于 React 跟踪哪些元素已更改并有效地更新DOM。

另一方面，当

在map之外使用普通的li标签时，没有必要分配一个唯一的键属性，因为该元素不是动态列表的一部分。在这种情况下，li 元素是静态的，并且将始终呈现在 DOM 中的相同位置。

我也很难理解为什么你描述的是这种情况，并在文档中找到了解决方案：

Answer 2

https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

（陷阱插入）。

里面写着：

您可能会想使用数组中项目的索引作为其键。事实上，如果你根本不指定键，React 就会使用它。

这解释了第一个示例（手动添加两个元素）和第二个示例（使用数组并映射到它）之间的差异。 每当您将数组插入到组件的返回值中时，每个元素都会被分配一个键作为

default

，并且该键将是该元素的索引。 这发生在幕后，并且在 React DevTools 中不可见，这就是它如此令人困惑的原因。

从理论上讲，这也意味着，如果 React 没有自动为数组的元素分配键，那么你就不需要给它们一个默认键，因为它们的功能就像常规元素一样（这显然不会）不需要钥匙）。