【理論知識學習】虛擬DOM節點

　　React很是快速是由於它從不直接操做DOM。

　　虛擬DOM是在DOM的基礎上創建了一個抽象層，對數據和狀態所作的任何改動，都會被自動且高效的同步到虛擬DOM，最後再批量同步到DOM中。

　　在React中，render執行的結果獲得的並非真正的DOM節點，而僅僅是JavaScript對象，稱之爲虛擬DOM。

　　虛擬DOM具備批處理和高效的Diff算法，能夠無需擔憂性能問題而隨時「刷新」整個頁面，由於虛擬DOM能夠確保只對界面上真正變化的部分進行實際的DOM操做。

　　在實際開發中無需關心虛擬DOM是如何運做的，但理解其運行機制不只有助於更好的理解React組件的生命週期，並且對於進一步優化 React程序也有很大幫助。

　一、傳統App與React App的對比：

　　傳統App:

 

　　React App：　　

 

　二、虛擬DOM的原理：

　　React會在內存中維護一個虛擬DOM樹，對這個樹進行讀或寫，其實是對虛擬DOM進行。當數據變化時，React會自動更新虛擬DOM，而後將新的虛擬DOM和舊的虛擬DOM進行對比，找到變動的部分，得出一個diff，而後將diff放到一個隊列裏，最終批量更新這些diff到DOM中。

　三、虛擬DOM的優勢：

　　最終表如今DOM上的修改只是變動的部分，能夠保證很是高效的渲染。

　四、虛擬DOM的缺點：

　　首次渲染大量DOM時，因爲多了一層虛擬DOM的計算，會比innerHTML插入慢。

　五、虛擬DOM的理解誤區：

　　對虛擬DOM的理解每每停留在：經過JavaScript對象模擬原生DOM，加上DOM Diff 極大提高了DOM操做的性能。然而，虛擬DOM最大的意義不在於性能的提高（JavaScript對象比DOM對象性能高），而在於抽象了DOM的具體實現（對DOM進行了一層抽象），這在瀏覽器中使用 React時不是特別明顯，由於寫的DOM標籤跟原生的沒有區別，而且最終都被渲染成了DOM，在React Native中將會有很好的說明。