React中为何表格<tr>元素无需设置唯一key属性？

先澄清一个关键误解：<tr>同样需要唯一的key属性！ #

你提到的第二个示例并不是不需要key，大概率是这几种情况让你误以为没有警告：

• 你使用的是非常旧的React版本（比如15.x之前），当时的警告机制对表格元素的列表检测不够严格；
• 你没有开启React的严格模式（Strict Mode），严格模式下会更严格地抛出这类警告；
• 控制台的警告被其他日志信息覆盖了，没注意到。

为什么两个示例看起来有差异？ #

本质上，<ul>里的<li>数组和<tbody>里的<tr>数组是完全一样的场景——都是在父元素下渲染一个元素数组，React的协调逻辑对这两种情况的要求是一致的：必须给数组中的每个元素分配唯一稳定的key，帮助React识别元素的身份，避免DOM更新时出现错误。

你第一个示例触发警告，只是因为React对<ul>+<li>这种经典列表组合的检测更直接，而表格元素的多层结构（<table>→<tbody>→<tr>）可能让你产生了“特殊待遇”的错觉，但实际上两者的规则完全相同。

正确的写法（不管是列表还是表格） #

不管是<li>还是<tr>，都应该添加唯一的key属性。如果是简单的静态列表，用索引临时凑数可以工作，但如果涉及到列表的排序、增删操作，一定要用每个元素独有的稳定标识（比如后端返回的ID）：

列表的正确写法

const List = () => (
  <ul>
    {[...Array(3)].map((_, idx) => (
      <li key={idx}>{idx}</li>
    ))}
  </ul>
);

表格的正确写法

const Table = () => (
  <table>
    <tbody>
      {[...Array(3)].map((_, idx) => (
        <tr key={idx}>
          <td>{idx}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

额外提醒：为什么不推荐用索引当key？ #

如果你的列表后续会有元素的添加、删除、排序操作，用索引作为key会导致React无法正确识别元素的身份——比如你在列表开头添加一个元素，所有后续元素的索引都会变化，React会错误地更新DOM，而不是复用已有的元素，影响性能甚至导致状态异常。所以最佳实践是使用每个元素独有的、不会随列表变化的标识。

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