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

Posted 2021-01-16 soyxiaobi

一、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 react key缺失

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

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

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

1.3 react 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》