React映射任意字符串时的key使用规范探讨

这确实是个挺常见的棘手场景，我自己在项目里也碰到过好几次！先明确React对Key的核心要求：在同级元素中唯一，且在组件生命周期内保持稳定——这是为了让React能准确识别列表项的变化，避免不必要的组件重渲染或错误的DOM更新。

针对你这个场景，我推荐几个实用的方案：

1. 生成「索引+内容」的组合Key #

这是兼顾唯一性和稳定性的折中方案，既避免了单纯用索引的潜在问题，又不需要额外的外部ID。核心思路是把每个行的索引和内容拼接成一个唯一标识，哪怕内容重复，索引不同组合出来的Key也不会重复：

import { useMemo } from 'react';

function MultiLineText({ text }) {
  // 用useMemo缓存拆分后的结果，避免每次渲染都重新生成
  const lineItems = useMemo(() => {
    return text.split('\n').map((line, idx) => ({
      key: `${idx}-${line}`,
      content: line
    }));
  }, [text]);

  return lineItems.map((item) => (
    <p key={item.key}>{item.content}</p>
  ));
}

这种方案的好处是：如果原字符串不变，Key就不会变；如果某一行内容被修改，对应的Key也会更新，React能正确识别并更新该组件；哪怕有重复的行内容，因为索引不同，Key依然唯一。

2. 静态列表下直接用索引+局部禁用ESLint规则 #

ESLint的react/no-array-index-key规则是最佳实践，而非绝对禁令。如果你的这个文本列表是静态的——也就是不会新增、删除行，也不会调整行的顺序，那用索引作为Key其实完全没有问题。

这时候你可以在代码中局部禁用这条规则，不用有心理负担：

function MultiLineText({ text }) {
  const lines = text.split('\n');
  
  // eslint-disable-next-line react/no-array-index-key
  return lines.map((line, idx) => (
    <p key={idx}>{line}</p>
  ));
}

React官方文档也提到，当没有自然可用的唯一Key时，索引是最后的选择——而在静态列表场景下，这个选择是完全安全的。

避坑提醒：不要用随机生成的临时ID #

有些同学可能会想到用Math.random()或者crypto.randomUUID()生成随机Key，但这种做法会导致每次组件渲染都生成新的Key，React会认为所有列表项都是新元素，从而频繁销毁和重建DOM节点，严重影响性能，一定要避免！

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