淺瞭解:react為何需要設定唯一key值(antd-table)
摘要：
一、React規範
1.1 react key的作用
當渲染重複資料的時候,React.diff
會根據生成的key進行虛擬DOM渲染, 所以我們需要在遍歷的地方都要加上key,例如map、for等等
同樣, antd作為react的UI元件庫, 有些地方也需要遵循...
一、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 uniquekey
prop,or setrowKey
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}`}
...
/>
具體的可以檢視官方文件:ofollow,noindex">《antd-table》