javascript - React index as key，这是一个好习惯吗？还是应该使用 react-uuid？

Question

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

第一个选项是只使用键作为项目键

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>);
})

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

预先感谢您的建议。

Answer 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.

react-uuid 将在您调用 uuid() 时生成动态 key ，并且它将在每次渲染时重新生成。

每当发生重新渲染时，动态生成的新键将导致每次创建一个新的组件实例。

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

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