-
虛擬dom中key的作用
當狀態中的資料發生改變時，react會根據新資料生成新的虛擬dom，隨后react進行新虛擬dom與舊虛擬dom的diff演算法比較，比較規則如下：
1.舊虛擬dom找到了與新虛擬dom相同的key
a.若虛擬dom中的內容沒變，則使用之前的真實dom
b.若虛擬dom中的內容發生了改變，則生成新的真實dom，隨后替換掉頁面之前的真實dom
2.舊虛擬dom沒有找到與新虛擬dom相同的key
根據資料創建新的真實dom，渲染到頁面
-
用index作為key可能引發的問題
1.若對資料進行逆序添加洗掉等破壞順序操作，會產生沒必要的真實dom更新，代碼效率低
2.如果結構中包含輸入類的dom，會產生錯誤dom更新，界面有問題
-
開發中如何選擇key
1.最好使用資料的每條標識作為key，比如id、手機號、身份證號、學號等
2.如果只是簡單的資料展示，使用index也是可以的
- ---------------------------------代碼演示---------------------
--------------------------------------運行結果------------------------------------------------
可以明顯的看到如果使用index作為key時，dom結構中出現了input輸入框的節點，diff演算法在進行新舊dom的比對時會出現錯亂的問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547693.html
標籤：其他
上一篇：前端設計模式——狀態模式