将索引作为键，这是一个好习惯吗？还是我应该使用 react-uuid？答案

【问题标题】：React index as key, is this a good practice? or should I use react-uuid?将索引作为键，这是一个好习惯吗？还是我应该使用 react-uuid？
【发布时间】：2020-10-19 05:16:54
【问题描述】：

您好，有一个需要呈现为一组按钮的项目列表，我只想知道哪个是好的和最简单的解决方案。

第一个选项只是将密钥用作项目密钥


const sampleoutput =[];
for (const [key, value] of Object.entries(sampleItem)) {
    sampleoutput.push(<li>
       <a key={key}
          href="#!"
          onClick={value.onClick}
       >
           {value.title}
       </a>
    </li>);
}

第二种解决方案是使用react-uuid

import uuid from "react-uuid";
sampleItem.map((value) => {
    return (<li>
       <a key={uuid()}
          href="#!"
          onClick={value.onClick}
       >
           {value.title}
       </a>
    </li>);
})

我还想考虑性能，第二个选项有另一组流程来生成密钥。我有点担心第一个选项，即使它因为这篇文章而简单得多https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

提前感谢您的建议。

【问题讨论】：

您可以在 sampleItem 对象中添加 id 属性并在 key 中使用此 id .

标签： javascript reactjs react-native for-loop foreach

【解决方案1】：

React expects stable static key which will last till component life 
Using this key, it decide whether new component instance need to
create or  have to update existing component instance property.

每当您调用uuid() 时，react-uuid 都会生成动态密钥，并且会在每次渲染时重新生成。

每当发生重新渲染时，动态生成的新密钥都会导致创建一个新的组件实例。

最好只从集合中创建一个键，该键在集合中存在数据之前不会更改并一直存在。

尽量避免react-uuid并使用第一种方法。

【讨论】：

【解决方案2】：

我的意见，当你想使用 key = index 时要小心，有些方法可以改变你的数组（slice / splice），并且索引会很乱。只是我的意见，兄弟。

【讨论】：

谢谢，但根据我的例子，这个按钮是无状态的

【解决方案3】：

我不会使用索引作为键，因为

重新排序列表，或从列表中添加和删除项目可能会导致当索引用作键时，组件状态出现问题。如果 key 是一个索引，重新排序一个项目会改变它。因此，组件状态可能会混淆，并可能将旧密钥用于不同的组件实例。

因此，请避免这种做法，并确保生成唯一 ID 被指定为键。

所以正如你提到的，UUid 是最好的。唯一生成密钥的来源

希望对您有所帮助。如有疑问，请随意

【讨论】：