浅了解:react为何需要设定唯一key值(antd-table)

最新推荐文章于 2025-05-29 21:59:29 发布

weixin_30698527

最新推荐文章于 2025-05-29 21:59:29 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/soyxiaobi/p/9871379.html

本文详细解析了React及Antd表格组件中使用key的重要性，包括避免渲染错误、提高性能以及解决Antd-table中因key缺失或重复导致的问题。通过实例展示了如何正确设置dataSource和columns的key值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、React规范

1.1 react key的作用

当渲染重复数据的时候,React.diff会根据生成的key进行虚拟DOM渲染, 所以我们需要在遍历的地方都要加上key,例如map、for等等

同样, antd作为react的UI组件库, 有些地方也需要遵循react的key规范.例如 antd-table 在渲染前要求: 在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

1.2 antd-table key缺失

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。

Each record in table should have a unique key prop,or set rowKey to an unique primary key.

虽然只是一个警告，但是这个会给页面table表格带来无法预测的错误

1.3 antd-table key相同

这种情况感觉到的错误会比较明显:因为你在一个列上的操作,在相同key上的列也会响应！

当鼠标滑过其中一个列并高亮的时候, 另一个列也会被高亮

二、添加Key值

我们知道了为什么添加key, 以及不添加key值会出现什么情况

2.1 完善`dataSource`和`columns`

每一行(dataSource)和每一列(columns)都应该要有一个唯一key值, 渲染的时候react才能准确知道是否需要修改.

let columns = [{
    key: '1',
    title: '歌曲名字',
    dataIndex: 'title'
}]

let dataSource = [{
    key: 1,
    title: '哑巴'
}]

<Table
    columns={columns}
    dataSource={dataSource}
/>

2.2 直接在table上加上每一列key值:`rowKey`

但是注意: 这个key也是要求唯一的

<Table
    rowKey={(record, index) => `complete${record.id}${index}`}
    ...
/>

具体的可以查看官方文档: 《antd-table》

转载于:https://www.cnblogs.com/soyxiaobi/p/9871379.html