1. 程式人生 > 其它 >React中key相關問題

React中key相關問題

  1. react/vue中的key有什麼作用?(key的內部原理是什麼?)
  2. 為什麼遍歷列表時,key最好不要用index?

1.虛擬DOM中key的作用:

1)簡單的說;key是虛擬DOM物件的標識,在更新現實時key起著極其重要的作用。

2)詳細的說;當狀態中的資料發生變化時,react會根據【新資料】生成【新的虛擬DOM】,隨後React進行【新虛擬DOM】與【舊虛擬DOM】的diffing比較,比較規則如下:

a.舊虛擬DOM中找到了與新虛擬DOM相同的key:

(1)若虛擬DOM中內容沒變,直接使用之前的真實DOM

(2)若虛擬DOM中內容變了,則聲稱新的真實DOM,隨後替換掉頁面中之前的真實DOM

b.舊虛擬DOM中未找到與新虛擬DOM相同的key:

根據資料建立新的真實DOM,隨後渲染到頁面

2.用index作為key可能會引發的問題:

1)若對資料進行:逆序新增、逆序刪除等迫害順序的操作:會產生沒有必要的真實DOM跟新==》介面效果沒有問題,但是效率低

2)如果結構中還包含輸入類的DOM:會產生錯誤的DOM更新==〉介面有問題。

3)注意!如果不存在對資料的逆序新增、逆序刪除等破壞順序操作,僅用於渲染列表用於展示,使用index作為key是沒有問題的。

3.開發中如何選擇key?

1)最好使用每條資料的唯一表示作為key,比如id、手機號、身份證號、學號等唯一值。

2)如果確定只是簡單的展示資料,用index也是可以的