另一種問法是:為什么遍歷列表時,key最好不要用index?
1、虛擬DOM中key的作用:
1).簡單的說:key是虛擬DOM對象的標識,在更新顯示時key起著極其重要的作用。
2).詳細的說:當狀態中的數據發生變化時,react會根據【新數據】生成【新的虛擬DOM】,隨后React進行【新虛擬DOM】與【舊虛擬DOM】的diff比較,比較規則如下:
a.舊虛擬DOM中找到了與新虛擬DOM相同的key:
(1)若虛擬DOM中內容沒變,直接使用之前的真實DOM
(2)若虛擬DOM中內容變了,則生成新的真實DOM,隨后替換掉頁面中之前的真實DOM
b.舊虛擬DOM中未找到與新虛擬DOM相同的key
根據數據創建新的真實DOM,隨后渲染到頁面
2、用index作為key可能會引發的問題
a.若對數據進行:逆序添加、逆序刪除等破壞順序操作:
會產生沒有必要的真實DOM更新 ==>界面效果沒問題,但效率低。
b.如果結構中還包含輸入類的DOM(input、checkbox等):
會產生錯誤DOM更新 ==> 界面有問題
c.注意!如果不存在對數據的逆序添加、逆序刪除等破壞順序操作,僅用于渲染列表用于展示,使用index作為key是沒有問題的。
開發中如何選擇key:
1、使用唯一標識作為key,比如id、身份證號、學號等
2、如果只是展示,使用index也是可以的