在 React 中，不应在渲染函数内用局部变量（如 let uniqueID = 1）生成行 ID，因其每次重渲染都会重置；应将唯一 ID 作为数据属性预先生成并稳定存在于 props 中，配合 key 和 JSX 渲染确保一致性与性能。
在 react 中，不应在渲染函数内用局部变量（如 `let uniqueid = 1`）生成行 id，因其每次重渲染都会重置；应将唯一 id 作为数据属性预先生成并稳定存在于 props 中，配合 `key` 和 jsx 渲染确保一致性与性能。
在 React 组件中为表格行生成唯一 ID 时，核心原则是：ID 必须具备稳定性（stability）、可预测性（predictability）和唯一性（uniqueness）。使用渲染时声明的局部变量（如 let uniqueID = 1; return <td>{uniqueID++}</td>）看似简洁，实则严重违反 React 的渲染机制——该变量在每次组件重渲染时都会重新初始化为 1，导致 ID 错乱、key 失效、状态错位，甚至引发子组件意外卸载与重建。
✅ 正确做法是将唯一 ID 作为数据的一部分，在渲染前一次性生成并固化。推荐使用数组索引（仅当数据顺序绝对稳定且无增删）或更可靠的唯一标识（如 crypto.randomUUID()、UUID 库或业务主键）：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
// ✅ 推荐：在数据层生成稳定 ID（适用于静态或受控数据）
const initialData = Array.from({ length: 10 }, (_, i) => ({
id: `row-${i + 1}`, // 语义化且稳定
name: `Item ${i + 1}`,
value: Math.random().toFixed(2),
}));
function TableComponent({ data }) {
return (
<table>
<tbody>
{data.map((item) => (
<tr key={item.id}> {/* key 必须基于稳定 ID */}
<td style={{ textAlign: 'center' }}>{item.id}</td>
<td>{item.name}</td>
<td>{item.value}</td>
</tr>
))}
</tbody>
</table>
);
}⚠️ 注意事项：
-
永远不要用
index作为key（如key={i}），除非列表是静态且永不排序、过滤或增删——否则 React 无法正确追踪元素身份，将引发 UI 异常和状态丢失； - 若数据来自 API 或动态更新，务必确保
id字段由后端提供或前端在首次加载时统一生成（如useMemo包裹生成逻辑），避免每次渲染重复计算； - 对于需要高可靠性的场景（如支持离线编辑、多端同步），建议使用
nanoid或uuidv4生成不可预测但全局唯一的 ID； - 若必须在组件内生成 ID（极不推荐），可借助
useRef缓存计数器，但需手动保证其与数据项一一对应且不随渲染重置——这极易出错，应优先选择数据驱动方案。
总结：React 中的“唯一 ID”本质是数据标识符，而非渲染计数器。将 ID 提前注入数据模型，既符合单向数据流思想，又能保障 key 的稳定性、提升渲染性能，并为后续扩展（如行选中、编辑、动画）奠定坚实基础。
