時間:2020/04/26 ,轉載請注明出處。
寫在前面
antd團隊于2020年2月發布了醞釀已久的antd@4.0版本,對樣式的調整、部分組件邏輯的重構都進行了較大改動,本文針對Table的rowKey屬性重構作分析。
由一個mistake帶來的思考
在數據治理模塊的表格中使用了Table點擊表格行進而選中該行的功能1(非checkbox,點此查看官方demo),升級4.0后發現被選中表格行的className缺少了 ant-table-row-selected,導致交互效果失效。因為升級前后代碼未作變動卻出現問題,antd官方也并未聲明該部分的改動,反復排查也沒有找到問題所在。

后來意識到因為rowKey屬性具有默認值"key",在不做顯式設置的情況下,組件對此無感知,antd未做聲明可能是因為該功能不會顯式地對組件的使用產生影響,而此處出錯的原因是我將rowKey錯誤地顯式設置成"id"(dataSource中record的唯一主鍵是"key",與"id"不一致,導致錯誤)。有意思的是v3.x竟然沒報錯,并且可以正常使用。基于此疑惑與不解,我去翻看了源碼,探究rowKey屬性值究竟會否以及如何影響樣式的變化。
在源碼的對比中發現問題所在
借助VSCode的gitlens擴展2,快速定位到了Table@4.x中對rowKey屬性的changelog。

發現antd對Table進行了大量樣式上的改寫,其中在PR(#19678)3中新增加了一個用于修改 rowClassName 的新方法 internalRowClassName ?。


在這個方法中,通過 getRowKey 獲取正確的rowKey值,為選中行添加類名 ant-table-row-selected 從而實現選中行的底色效果。而 getRowKey 方法通過Table的rowKey屬性值(默認為"key")去獲取record["key"]的值,從而返回正確的key值?。所以當rowKey屬性不顯式設置或設置為正確的值(record的唯一主鍵)時,getRowKey方法可以返回正確的值,從而為row添加類名。但如果rowKey設置錯誤,則 getRowKey 返回undefined,那么 internalRowClassName 方法無法為row添加 ant-table-row-selected 類名。

由此看到,4.0版本中要求rowKey屬性必須傳入正確的值。那么為什么*rowKey傳入錯誤的值在3.x版本中卻沒有報錯呢?*
帶著疑問,我將antd切到了branch@3.x-stable分支中再次查看getRowKey方法,發現 3.x中 getRecordKey 的返回值并不會受 rowKey 被錯誤設置的影響,它永遠可以返回一個正確可用的key值?,因此不會出現上述問題。

真相大白。
如此一來,antd@3.x中rowKey屬性的值實質上并不會對組件的使用產生報錯性的影響(但會拋出warning),這也就解釋了開篇中該mistake的問題所在。4.x對rowKey屬性的改寫以及rowClassName方法的新增,優化了Table組件的正確合理使用。antd將該PR定性為重構(Refactoring)?。
