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

Question

问题如下:

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

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

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

Answer 1

每次组件的键发生变化时，React 都会create a new component instance rather than update the current one ，因此出于性能考虑，至少可以说，使用 Math.random() 并不是最优的。

此外，如果您要以任何方式重新排序组件列表，使用索引作为键不会有帮助，因为 React 协调器将无法仅移动关联的现有 DOM 节点使用组件，它必须为每个列表项重新创建 DOM 节点，这将再次导致性能次优。

但重申一下，只有当您要重新排序列表时，这才会成为问题，因此就您的情况而言，如果您确定不会以任何方式重新排序列表，您可以安全地使用索引作为 key 。

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

添加 id 的快速方法是在您第一次接收(或创建)列表时映射列表并为每个项目分配索引。

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

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

tl;dr 如何为寻找此答案的新人选择 key

1. 如果您的列表项具有唯一 ID(或其他唯一属性)使用它作为关键

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

3. 如果上述方法都不起作用，但您可以小指保证不会以任何方式重新排序列表，则可以使用数组索引作为键，但最好将自己的 id 添加到首次接收或创建列表时的列表项(见上文)