为组件提供唯一键时，可以使用Math.random（）生成那些键吗？

武卓

2023-03-14

问题内容：

问题如下：

我有几千个元素的列表形式的数据。其中一些是重复项，然后可能还会有重复的密钥。因为我没有真正的“
ID”或任何能让我有机会将所有元素的ID赋予唯一键的东西，所以可以使用Math.random()吗？

据我了解，键主要是通过react来区分组件的。我认为就我的代码而言，这些键与我实际上没有任何关系，应该可以吗？为了确保不会有重复的数字，我不妨将两个数学随机数彼此相除以获得几乎确定的唯一键。

这是一个好习惯吗？我可以不用担心什么而使用它吗？

问题答案：

每当组件的关键更改发生时，React都会创建一个新的组件实例，而不是更新当前实例，因此，为了提高性能，使用Math.random（）至少可以说是次优的。

同样，如果您将以任何方式对组件列表进行重新排序，则使用索引作为键也
无济于事，因为React协调器将无法仅在与组件相关联的现有DOM节点周围移动，而是必须重新-为每个列表项创建DOM节点，它们将再次具有次佳的性能。

但是重申一下，这仅在您要对列表进行重新排序时才是问题，因此，在您的情况下，如果您确定不会以任何方式 对列表进行重新排序
，则可以安全地将index用作键。

但是，如果您确实打算对列表进行重新排序（或者只是为了安全起见），那么我将为您的实体生成唯一的ID-如果没有可以使用的预先存在的唯一标识符。

添加ID的一种快速方法是仅 在首次接收（或创建）列表时 映射列表并将索引分配给每个项目。

const myItemsWithIds = myItems.map((item, index) => { ...item, myId: index });

这样，每个项目都会获得唯一的静态ID。

tl; dr如何为新人找到钥匙找到答案

如果您的列表项具有唯一ID（或其他唯一属性），请使用该ID作为键
如果可以组合列表项中的属性以创建唯一值，请将该组合用作键
如果以上方法均无效，但您可以保证不会以任何方式对列表进行重新排序，则可以将数组索引用作键，但是最好在列表出现时将自己的ID添加到列表项中首次收到或创建（请参见上文）