淺了解:react為何需要設定唯一key值(antd-table)

一、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》