我先回答這個問題:
key的作用主要是為了高效的更新虛擬dom
在diff演算法中 key是為了在diff演算法執行時更快的找到對應的節點，提高diff速度
兩個相同的元件產生類似的dom結構，不同的元件產生不同的dom結構。
同一層級的一組節點，他們可以通過唯一的id進行區分。
基於以上這兩點假設，使得虛擬dom的diff演算法的複雜度從o(n^3)降到了o(n)。
這裡我們借用react』s diff algorithm中的一張圖來簡單說明一下：
當頁面的資料發生變化時，diff演算法只會比較同一層級的節點：
如果節點型別不同，直接乾掉前面的節點，再建立並插入新的節點，不會再比較這個節點以後的子節點了。
如果節點型別相同，則會重新設定該節點的屬性，從而實現節點的更新。
diff演算法預設情況是
如果想在b,c中間插入f
執行起來實際效果是這個樣子的，這樣執行起來效率低。
需要使用key來給每個節點做乙個唯一標識，diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。
diff演算法原始碼相關已經有大牛寫過了我也看過 具體可以參考vue diff 詳解
React元件中的key
一 key的作用 react中的key屬性，它是乙個特殊的屬性，它是出現不是給開發者用的 例如你為乙個元件設定key之後不能獲取元件的這個key props 而是給react自己用的。簡單來說，react利用key來識別元件，它是一種身份標識標識，就像我們的身份證用來辨識乙個人一樣。每個key對應乙...
Vue React列表元件中寫 key 原因
vue 和 react 都是採用 diff 演算法來對比新舊虛擬節點，從而更新節點。vue 文件原文 當 vue 正在更新使用 v for 渲染的元素列表時，它預設使用 就地更新 的策略。如果資料項的順序被改變，vue 將不會移動 dom 元素來匹配資料項的順序，而是就地更新每個元素，並且確保它們在...
React中利用 key 實現元件重新渲染
最近在專案實踐中，發現react中可以利用key實現子元件的重新渲染，具體場景 需要切換下拉列表時，對應的榜單也要替換成該輪的資料 如下 render this state round表示選中的選單的索引 return record wrap selectedindex showmenu oncha...