# Dom的Diffing
###### tags: `React` `Javascript`
Diffing 比較最低粒度為標籤，且多層級
=> 標籤A內有標籤B 標籤A的值改變但是沒有影響標籤B則只更新標籤A

//state.xxx更新時只會更新span
<span> { this.stat.xxx } <input type="text"></span>

react的key有什麼作用 ( 內部原理 ) ?
為什麼迴圈跑列表時最好不要用index當key ?

1. 虛擬DOM中key的作用
簡單說 : key是虛擬DOM物件的標示，在更新顯示時key起著極其重要的功用
詳細說 : 當狀態中的數據發生變化時，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更新，因為資料筆數改變導致index錯誤等等 => 畫面可能沒問題但會造成diffing大量更新
b. 如果畫面結構中包含輸入類的DOM會產生錯誤的DOM更新 => 畫面會有問題
c. 如果不存在破壞順序的操作則用index當key就不會有問題但效率還是低