Javascript 在React中使用index作为键而不是Math.random（）更好吗？

下面是我的react代码，它显示菜单项，不幸的是，我没有得到任何id来添加为列表中的键。正如第节文档中所述，建议避免使用

Math.random（）

。在显示菜单列表时，使用索引作为键是否比

Math.random（）

性能更好

代码-

[{name:'Home'}，{name:'About'}，{name:'News'}，{name:'Contact'}].map（（项目，索引）=>{
返回`
${item.name}
`
})

简单地说，我也不会使用。关键点是允许在渲染期间识别您正在创建的子对象

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

我会为你的每个对象添加一个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:1，名称：'Home'}，
{id:2，名称：'About'}，
{id:3，名称：'News'}，
{id:4，名称：'Contact'}，
].map（{id，name}）=>{
返回
{name}
})

---

这样，如果要对数组进行重新排序，ID将一致地标识对象。

简单地说，我也不会使用。关键点是允许在渲染期间识别您正在创建的子对象

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

我会为你的每个对象添加一个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:1，名称：'Home'}，
{id:2，名称：'About'}，
{id:3，名称：'News'}，
{id:4，名称：'Contact'}，
].map（{id，name}）=>{
返回
{name}
})

---

这样，如果要对数组进行重新排序，ID将一致地标识对象。

当然，只使用索引而不是每次调用函数更有效。不过，用户不太可能注意到这一点。文档已经解释了为什么需要非随机密钥，因为React需要一个稳定的标识来检测对同一项的更改。在你的链接里。除此之外，如果你使用随机数，你如何确保没有冲突？如果我是你，我不会使用

math.random

或

索引作为键。如果阵列发生变化，您的关键点将被弄乱，这将在扩散引擎中导致非常奇怪的行为。使用其他方法，如果找不到好的值，自动递增ID将是更好的解决方案。如果确定名称是唯一的，就使用它们。@LucaKiebel索引和随机数一样无用，除非列表中的项目总是具有相同的索引（即，您不希望在列表的中间或开头插入或删除项，或对列表进行不同的排序）。当然，只使用索引比每次调用函数更有效。不过，用户不太可能注意到这一点。文档已经解释了为什么需要非随机键，因为React需要一个稳定的标识来检测对同一项的更改。它位于您拥有的链接中。除此之外，如何如果你使用随机数，你会确保没有冲突吗？如果我是你，我不会使用
math.random
或
index
作为键。如果数组发生变化，你的键会被弄乱，这将导致扩散引擎中出现非常奇怪的行为。使用其他方法，如果U不能找到一个好的值。如果你确信名字是唯一的，就使用它们。@ LuxaKeBeL一个索引就像一个随机数一样无用，除非列表中的项目总是具有相同的索引（即，你永远不想在列表的中间或开始时插入或删除一个项目，或者对列表进行不同的排序）。。当列表将是一组唯一值时，仅使用
名称
作为键没有任何问题。当然，如果您不能假设它们是唯一的，则不应该这样做。当列表将是一组唯一值时，仅使用
名称
作为键没有任何问题。当然，如果您不能假设他们是独一无二的，你不应该这样做。