为组件提供唯一键时，是否可以使用 Math.random() 生成这些键? [英] When giving unique keys to components, is it okay to use Math.random() for generating those keys?
问题描述
问题如下:
我有几千个元素列表形式的数据.其中一些是重复的，然后也可能有重复的键.因为我没有真正的ID"或任何可以让我有机会将所有元素的 id 作为唯一键的东西，是否可以使用 Math.random() 代替?
I have data in form of a list of a few thousand elements. Some of them are duplicates, and there might be the chance of having duplicate keys as well then.
Because I have no real "ID" or anything which would give me the opportunity to give all elements their id as unique keys, is it okay to use Math.random() instead?
据我了解，key主要是react用来区分组件的.我认为就我的代码中的键而言，我真的没有任何关系，这应该没问题吗?为了确保不会有重复的数字，我不妨将两个数学随机数相互除以得到一个几乎肯定唯一的密钥.
As far as I understood, the keys are mainly used by react to differentiate the components. I think as far as I don't really have anything to do with the keys in my code, this should go fine? To ensure that there will be no duplicate number I might as well divide two math randoms with each other to get an almost certainly unique key.
这是一个好习惯吗?我可以使用它而不必担心任何事情吗?
Is this a good practice? Can I use this without having to worry about anything?
推荐答案
每当组件的关键变化 React 都会 创建一个新的组件实例而不是更新当前的实例，所以为了性能使用 Math.random() 至少可以说是次优的.
Every time a component's key changes React will create a new component instance rather than update the current one, so for performance's sake using Math.random() will be sub-optimal to say the least.
此外，如果您要以任何方式重新排列组件列表，使用索引作为键也不会有帮助，因为 React 协调器将无法移动关联的现有 DOM 节点与组件，相反，它必须为每个列表项重新创建 DOM 节点，这将再次具有次优性能.
Also if you'll be reordering your list of components in any way, using the index as key will not be helpful either since the React reconciler will be unable to just move around existing DOM nodes associated with the components, instead it will have to re-create the DOM-nodes for each list item, which, once again will have sub-optimal performance.
但重申一下，这只会在您对列表重新排序时出现问题，因此就您而言，如果您确定不会以任何方式对列表重新排序，您可以安全地使用索引作为键.
But to reiterate, this will only be a problem if you will be re-ordering the list, so in your case, if you are sure you will not be reordering your list in any way, you can safely use index as a key.
但是，如果您确实打算对列表重新排序(或只是为了安全起见)，那么我将为您的实体生成唯一 ID - 如果没有您可以使用的预先存在的唯一标识符.
However if you do intend to reorder the list (or just to be safe) then I would generate unique ids for your entities - if there are no pre-existing unique identifiers you can use.
添加 id 的一种快速方法是在您第一次接收(或创建)列表时，映射列表并将索引分配给每个项目.
A quick way to add ids is to just map the list and assign the index to each item when you first receive (or create) the list.
const myItemsWithIds = myItems.map((item, index) => { ...item, myId: index });
这样每个项目都会获得一个唯一的静态 ID.
This way each item get a unique, static id.
tl;dr 如何为找到此答案的新人选择密钥
如果您的列表项具有唯一的 id(或其他唯一属性)使用它作为关键
If your list item have a unique id (or other unique properties) use that as key
如果您可以组合列表项中的属性以创建唯一值，请使用该组合作为键
If you can combine properties in your list item to create a unique value, use that combination as key
如果以上都不起作用，但您可以保证不会以任何方式重新排序列表，则可以使用数组索引作为键，但最好将自己的 id 添加到第一次接收或创建列表时的列表项(见上文)
If none of the above work but you can pinky promise that you will not re-order your list in any way, you can use the array index as key, but you are probably better of adding your own ids to the list items when the list is first received or created (see above)
这篇关于为组件提供唯一键时，是否可以使用 Math.random() 生成这些键?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
