React渲染数组元素时如何正确选择key？datagrid场景选型疑问

现有认知正误校准 #

你当前的认知存在部分偏差：

• 「使用row.id作为key时，已加载的行数据变化不会触发重渲染」的说法是错误的。key的核心作用是帮React识别列表中不同元素的实例对应关系，实现DOM的最小化复用，而非控制组件的更新逻辑。只要绑定给行组件的props发生变化，哪怕key不变，行组件依然会触发正常的重渲染流程，不会出现数据更新后视图不同步的问题。
• 「使用nanoid这类动态生成的唯一id会影响排序、筛选操作的性能」的说法是正确的。每次列表重渲染时动态生成新key，会让React判定所有行元素都是全新节点，直接销毁旧DOM实例、重建全部行，不仅会产生不必要的性能开销，还会丢失行内的临时状态（比如未提交的输入内容、行展开/收起状态等）。

你的场景下的正确选择 #

你开发的datagrid场景下，优先选择业务侧返回的稳定唯一值row.id作为key，原因如下：

1. 跨刷新的数据修改场景下，只要行的业务IDrow.id不变，React会复用现有行组件实例，自动对比props差异更新视图，完全可以适配其他用户修改行数据后的刷新需求。
2. 排序、筛选、分页操作时，同一行的row.id不会发生变化，React可以快速定位元素位置完成列表重排，不需要重建全部DOM，性能表现远优于动态生成的key。
3. 如果后端存在极小概率返回重复row.id的问题，可以将row.id和其他行唯一属性拼接生成稳定key，例如：`${row.id}-${row.updatedAt}`，只要保证key和单行业务数据唯一绑定、渲染过程中不会随意变化即可。

特殊场景补充 #

如果你有单例行组件强制重置的需求（比如行编辑时重置未提交的临时状态），单独为该行的key做可控逻辑即可，不要将全局的列表key替换为动态生成值。

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