React/vue中的key的作用
React/vue中的key的作用，react/vue 中遍歷列表時(shí), key最好不要用 index
虛擬DOM中key的作用
1. 簡(jiǎn)單講
key是虛擬DOM的標(biāo)識(shí), 在更新顯示時(shí)key起著及其重要的作用
2. 詳細(xì)講:
當(dāng)狀態(tài)中的數(shù)據(jù)發(fā)生變化時(shí), react會(huì)根據(jù) 【新數(shù)據(jù)】生成【新的虛擬DOM】盹靴，隨后React進(jìn)行【新虛擬DOM】與【舊虛擬DOM】的diff比較炸茧，比較規(guī)則如下：
a. 舊虛擬DOM中找到了新虛擬DOM相同的key:
(1). 若虛擬DOM中內(nèi)容沒(méi)變, 直接使用之前的真實(shí)DOM
(2). 若虛擬DOM中內(nèi)容變了, 則生成新的真實(shí)DOM, 隨后替換掉頁(yè)面中之前的真實(shí)DOM
b. 舊虛擬DOM中未找到新虛擬DOM相同的key:
(1). 根據(jù)數(shù)據(jù)創(chuàng)建新的真實(shí)DOM, 隨后渲染到頁(yè)面中
使用Index作為key可能會(huì)引發(fā)的問(wèn)題
- 若對(duì)數(shù)據(jù)進(jìn)行: 逆序添加, 逆序刪除等破壞順序操作:
會(huì)產(chǎn)塵沒(méi)有必要的真實(shí)DOM更新, 界面效果沒(méi)問(wèn)題, 但效率低
- 如果結(jié)構(gòu)中還包含輸入類的DOM, 例如 input 標(biāo)簽
會(huì)產(chǎn)生錯(cuò)誤DOM更新, 界面有問(wèn)題。
- 注意: 如果不存在對(duì)數(shù)據(jù)的逆序添加, 逆序刪除等破壞順序的操作, 僅用于渲染列表用于展示, 使用index作為key是沒(méi)有問(wèn)題的.
開(kāi)發(fā)中如何選擇key?
- 最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key, 比如id, 手機(jī)號(hào), 身份證號(hào), 學(xué)號(hào)等唯一值
- 如果確定只是簡(jiǎn)單的展示數(shù)據(jù), 用index也是可以的
