如何用JavaScript为数组元素生成唯一ID？React替代索引作key的方案

嘿，这个场景我之前处理过，刚好给你梳理下可行的方案和要注意的点：

一、能不能用系统计时值生成唯一ID？ #

完全可以，但得选对API！现代JS环境提供了高精度的计时工具，能保证绝大多数情况下，连续调用都能拿到不同的值：

• 浏览器里用performance.now()就行，它返回的是精确到1微秒（千分之一毫秒）的时间戳，哪怕你在同一事件循环里快速遍历数组，每次调用都会返回递增的新值，不会重复。
• Node.js环境的话，process.hrtime.bigint()能给到纳秒级的精度，更靠谱；从8.5版本开始也支持performance.now()，和浏览器端行为一致。

⚠️ 要避开Date.now()！它只有毫秒级精度，如果数组元素多、遍历速度快，同一毫秒内生成的ID会重复，直接导致React的key冲突。

二、推荐的精度是多少？ #

• 浏览器端：优先用performance.now()的1微秒精度，足够覆盖所有遍历场景，不会有重复问题。
• Node.js端：纳秒级的process.hrtime.bigint()是最优解，或者用和浏览器一致的performance.now()也没问题。
• 要是得兼容老浏览器（比如IE9及以下），可以搞个组合方案：用Date.now()加自增计数器，代码大概是这样：

  let idCounter = 0;
  const getUniqueId = () => `${Date.now()}-${idCounter++}`;
  

  哪怕同一毫秒内多次调用，计数器也能保证ID唯一。

三、React Key的坑要注意！ #

虽然计时生成的ID是唯一的，但React对key的要求是稳定不变：

• 如果你的数组是静态的（不会增删改、也不会重新渲染），用计时ID完全没问题。
• 但如果数组会动态更新（比如加元素、删元素、排序），每次渲染都生成新的计时ID会让React把所有元素都销毁重建一遍，性能拉胯。这种情况建议：
  1. 优先用数据自带的唯一标识（比如后端返回的ID，这是最优解）。
  2. 数据没天然ID的话，就在第一次加载数据时给每个元素分配固定的唯一ID（比如用uuid库，或者刚才说的Date.now()+计数器），别每次渲染都生成新的。

最后补一句为啥不能用索引当Key #

你应该知道linter不让用索引的原因，但再提一句加深印象：当数组元素顺序变了（比如排序、删前面的元素），索引作为key会让React认错组件，复用错误的实例，导致状态乱掉、渲染出错，这就是规则禁止的核心原因。

内容的提问来源于stack exchange，提问作者Deepanshu Arora