为什么React片段<></>在循环渲染时需要唯一的key属性

Question

所以根据文档，React 片段不会出现在 DOM 上。它不会向 DOM 注入任何元素。

但是假设我们想要在片段内的循环中渲染元素

elementList.map((eachEl) => <> {<span></span>} </>)

控制台中有一条警告“列表中的每个子项都应该有一个唯一的“key”道具”。如果您为每个元素分配键，则警告不会消失。

elementList.map((eachEl) => <> {<span key={uniqeKeyValue} ></span>} </>)

如果我们为片段分配一个键，警告就会消失。

那么，既然React片段不会向DOM注入任何元素，为什么它需要一个唯一的key属性呢？看起来为每个元素分配键应该没问题。

为什么一个甚至没有出现并定居在 DOM 上的“幽灵元素”需要一个唯一的键？

Answer 1

嗯，元素本身实际上并不需要

key

，而是循环（在您的情况下是地图循环）。

为什么钥匙有用？因此，React 可以知道列表中的元素是否已更改/移动，并对它应用优化并安装/卸载回调。

即使片段本身没有被渲染，它的子片段也会被渲染。片段只是一个逻辑容器。