談談Vue/React中的虛擬DOM(vDOM)與Key值

談談Vue/React中的虛擬DOM(vDOM)與Key值

1、DocumentFragment

在瞭解虛擬DOM前，先來了解DOM的一個對象屬性——DocumentFragment。

在一次操做中，須要頻繁操做DOM時，就能夠先將要改變的節點附在DocumentFragment上，以後再將該對象渲染到DOM中，改方法只對DOM進行了一次操做，能夠顯著提升性能。

可是該方法只適用於局部操做，而在真實的項目中，須要的不單單是DocumentFragment，因而就有了虛擬DOM的產生

緊接着，對於這麼一個東西，咱們先來基本的三連問。是什麼？爲何？怎麼用？

2、VDOM

什麼是虛擬DOM?

虛擬DOM的本質是一個和真實DOM結構相似的JS對象

爲何要用虛擬DOM?

虛擬DOM能夠提升瀏覽器的渲染速度。對比操做JS對象，操做真實的DOM消耗的性能較多，頻繁的操做DOM時，優點彰顯的更爲明顯。

虛擬DOM的實現步驟？

• 一、在頁面首次渲染時，將要渲染的數據所有加載到虛擬DOM中，然後在一次性渲染到真實DOM上

• 二、在數據變化時，額外的生成一顆虛擬DOM樹

• 三、經過Diff算法對比修改的部分，然後將修改部分渲染到真實的DOM中

• 四、釋放內存

真實DOM與虛擬DOM示意圖

真實DOM

虛擬DOM則相似與以下圖

3、Key值的用處

在一個Vue項目或者React項目中，寫循環時，每每會加上key值。那麼這個key值到底有多大的用處呢？

• 首先，在Vue中，存在一個DOM複用機制，會盡可能的回收DOM元素進行復用，而這個機制自己是高效的，但不少時候也會形成不可預知的Bug，而在加了key值後，元素就有了一個標識，複用機制不會複用帶key值的元素。而React也存在相似的機制。

• 反之，若使用相同的key值，可使組件複用，也有可能致使渲染內容缺失。

• 所以，key值通常來講，最好是獨一無二的。

• 除此以外，虛擬DOM在使用Diff算法進行對比時，若存在key值，能夠更高效更迅速。