刷題-2

寫 React / Vue 項目時爲何要在組件中寫 key，其做用是什麼?

擴展： diff 算法

前言：虛擬 DOM

咱們知道 Vue 的 virtual dom（操做DOM,是一個很好性能的一件事情）。由於數據的更新確定會引發 DOM 的更新，那咱們就儘量的去複用原來的 DOM。 所謂的 virtual dom，也就是虛擬節點。它經過 JS 的 Object 對象模擬 DOM 中的節點，而後再經過特定的 render 方法將其渲染成真實的 DOM 節點。 dom diff 則是經過 JS 層面的計算，返回一個 patch 對象，即補丁對象，在經過特定的操做解析 patch 對象，完成頁面的從新渲染。Vue 的 diff 位於 path.js 中。 網上找的圖，能夠幫助理解。

DOM DIFF

比較兩棵 DOM 樹的差別是 Virtual DOM 算法最核心的部分.簡單的說就是新舊虛擬dom 的比較，若是有差別就以新的爲準，而後再插入的真實的dom中，從新渲染。、 借網絡一張圖片說明:

比較只會在同層級進行, 不會跨層級比較。

比較後會出現四種狀況：

1. 此節點是否被移除 -> 添加新的節點
2. 屬性是否被改變 -> 舊屬性改成新屬性
3. 文本內容被改變-> 舊內容改成新內容
4. 節點要被整個替換 -> 結構徹底不相同 移除整個替換

比較規則：

同層級進行比較，從上(根節點)到下，從左到右。把不一樣的打上標記，放到數組裏面去，統一交給patch處理。

關於 Key

渲染數據時，帶 key，能不能提升性能呢，其實這個問題，得分兩種狀況來看；

• 官網推薦的使用key，文檔也有說明, 只適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。.可是真實的狀況是，這種模式只適用於渲染簡單的無狀態組件。對於大多數場景來講，列表組件都有本身的狀態。

  舉個例子：一個新聞列表，可點擊列表項來將其標記爲"已訪問"，可經過tab切換「娛樂新聞」或是「社會新聞」。

• 說到底，key 的做用就是更新組件時判斷兩個節點是否相同。相同就複用，不相同就刪除舊的建立新的。

  帶上惟一key雖然會增長開銷，可是對於用戶來講基本感覺不到差距，並且能保證組件狀態正確，這應該就是爲何推薦使用惟一id做爲key的緣由。

上圖中，B1,B2 是相同的節點，可能只是屬性不同。當 無 key 時，在 diff 比較時，不知道是移動仍是更新，會直接把 B1 更新成了 B2，把 B2 更新成了 B1,此時 E，F節點是沒辦法複用的。

可是，當有 key 時，B1,B2，就有了惟一的標識，就變成了 B1 和 B2 的移動，而E，F也能夠複用了。