簡述dom diff原理

前言：

關於react的虛擬dom以及每次渲染更新的dom diff，網上文章不少。可是我一直信奉一個原則，即：但凡複雜的知識，理解以後都只須要記憶簡單的東西，而想簡單、精確描述一個複雜知識，是極困難的事。

正文

dom diff是什麼？
1.從根節點開始遍歷全部節點；
2.對於不一樣類型的標籤，刪除原標籤，新建標籤；
3.對於類型相同、屬性不一樣的標籤，只修改屬性；
4.對於同一個父節點下的複數同類型標籤（即列表類型），基於key對比、修改。

解析

關於1：

-遍歷用的是前序遍歷（先序遍歷）

關於2：

-不一樣類型的標籤是指：好比div和span就是不一樣類型的標籤
-若是同一個位置的標籤類型改變（依然以div和span爲例），那麼直接刪除div標籤，新建一個span標籤，從新渲染。本來的div標籤裏的一切都跟新的span標籤沒有關係
-對於自定義的組件好比<Header />、<TodoList />之類的也適用
-標籤位置只相對於父節點有意義。假設本來A節點的父節點是B，更新後A節點的父節點是C，那麼對於dom diff來講，本來的A節點會被銷燬，在C節點下的A節點是一個新的節點，跟本來的A節點沒有關係

關於3：

-這一個比較好理解，對於僅僅屬性不一樣的標籤，修改屬性便可

關於4

-假設一個div下有五個span節點，此時咱們要插入一個節點

虛擬dom並不知道插入後是ABFCDE，而會認爲除了AB之外的節點都改變了
因此對於虛擬dom來講此時是ABGHIJ，付出了額外的消耗。
因而react引入了key的概念。兩個key相同的節點，虛擬dom會認爲是同一個節點，從而對其進行比較。引入了key以後，react就知道節點是ABFCDE了。