在为组件提供唯一键时，可以使用 Math.random() 生成这些键吗？

Question

问题如下：

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

据我了解，keys主要是react用来区分组件的。我认为，就我的代码中的键而言，我真的没有任何关系，这应该没问题吗？为了确保不会有重复的数字，我不妨将两个数学随机数相除以获得几乎肯定唯一的密钥。

这是一个好习惯吗？我可以使用它而不必担心任何事情吗？

原文由 Sossenbinder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

但重申一下，这只会在您重新排序列表时出现问题，因此在您的情况下，如果您确定 不会以任何方式重新排序列表，您可以安全地使用 index 作为键。

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

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

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

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

tl; dr 如何为找到此答案的新人选择密钥

1. 如果您的列表项具有唯一 id（或其他唯一属性），请将其用作键

2. 如果您可以组合列表项中的属性以创建唯一值，请使用该组合作为键

3. 如果上述方法均无效，但您可以保证不会以任何方式重新排序列表，则可以使用数组索引作为键，但您最好在列表中添加自己的 id 到列表项首次接收或创建（见上文）

原文由 Markus-ipse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需在您的反应组件中实现以下代码…

 constructor( props ) {
    super( props );

    this.keyCount = 0;
    this.getKey = this.getKey.bind(this);
}

getKey(){
    return this.keyCount++;
}

…并调用 this.getKey() 每次您需要一个新密钥时，例如：

 key={this.getKey()}

原文由 josthoff 发布，翻译遵循 CC BY-SA 3.0 许可协议