在 React 中使用索引作为键而不是 Math.random() 会更好吗？答案

【问题标题】：Is it better to use index as key instead of Math.random() in React?在 React 中使用索引作为键而不是 Math.random() 会更好吗？
【发布时间】：2019-02-19 14:24:30
【问题描述】：

以下是我的反应代码，它显示菜单项，不幸的是我没有得到任何 id 作为列表中的键添加。正如Keys 部分下的文档中所述，建议避免使用Math.random()。在显示菜单列表时使用 index 作为 key 是否比Math.random() 性能更好？

代码-

[{name: 'Home'}, {name: 'About'}, {name: 'News'}, {name: 'Contact'}].map((item, index) => {
    return `<li key=${index}>${item.name}</li>`
})

【问题讨论】：

当然，只使用索引而不是每次都调用一个函数会更高效。不过，用户不太可能注意到这一点。
文档已经解释了为什么你需要一个非随机密钥——因为 React 需要一个稳定的身份来检测对同一项目的更改。它在您拥有的链接中。此外，除此之外，如果您使用随机数，您将如何确保没有冲突？
如果我是你，我不会使用math.random 或index 作为键。如果数组发生变化，你的键就会被弄乱，这将在 diffing 引擎中引起非常奇怪的行为。使用其他东西，如果找不到合适的值，自动递增 ID 将是更好的解决方案。
如果您确定名称是唯一的，请使用它们。
@LucaKiebel 索引与随机数一样无用，除非列表中的项目始终具有相同的索引（即，您永远不想在中间或开头插入或删除项目列表，或对列表进行不同的排序）。

标签： javascript reactjs performance ecmascript-6

【解决方案1】：

简单地说，我也不会使用。关键是让 React 在渲染期间识别您正在创建的子 <li>s。

使用随机键或数组索引不会提供一致的键。

我会改为为您的每个对象添加一个 ID...

[
  { id: 1, name: 'Home' },
  { id: 2, name: 'About' },
  { id: 3, name: 'News' },
  { id: 4, name: 'Contact' },
].map(({ id, name }) => {
  return <li key={id}>{name}</li>
})

这样，如果您要对数组重新排序，ID 会始终标识对象。

【讨论】：

当列表将成为一组唯一值时，仅使用 name 作为键没有任何问题。当然，如果你不能假设它们是独一无二的，你就不应该这样做。