React的Virtual DOM厲害了

React 的偉大之處就在於，提出了Virtual DOM這種新穎的思路，而且這種思路衍生出了React Native，有可能會統一Web/Native開發。

在性能方面，因爲用到了Virtual DOM技術，React只在調用setState時會更新dom，並且仍是更新virtual DOM，而後和實際的DOM比較，最後再更新實際的DOM。

Virtual DOM的核心思想是：批量操做DOM和做用最少的diff

你一個接一個地去修改30個節點的時候，就會引發30次（潛在的）佈局重算，30次（潛在的）重繪，等等。

以後，一旦你要把這些改動傳遞給真實DOM，以前全部的改動就會整合成一次DOM操做。這一次DOM操做引發的佈局計算和重繪可能會更大，可是相比而言，整合起來的改動只作一次，減小了（屢次）計算。

這就是所謂的Virtual DOM算法，包括幾個步驟：

1.用javascript對象結構表示DOM樹的結構，而後用這個樹構建一個真正的DOM樹，插入到文檔流中

2.當文檔變動時，從新構造一顆新的對象樹，而後用新的對象樹和舊的對象樹對比，記錄兩棵樹的差別

3.把2所記錄的差別應用到1所構建的真正的DOM樹上，就實現變動了

 

Virtual DOM本質上就是在JS和DOM之間作了一個緩存。能夠類比CPU和硬盤，既然硬盤這麼慢，咱們就在他們之間加一個緩存。既然JS這麼慢，咱們就在JS和DOM之間加一個緩存。CPU只操做內存，最後把變動寫入硬盤。JS只操做Virtual DOM，最後把變動寫入DOM。

 

其思想的關鍵是：

1.相對於 DOM 對象，原生的JS對象處理起來更快更簡單。

2.比較兩棵DOM樹的差別是 Virtual DOM算法最核心的部分，這也是所謂的Vritual DOM的diff算法。 

 

爲何快不少？

固然若是真的這樣大面積的操做 DOM，性能會是一個很大的問題，因此 React 實現了一個虛擬 DOM，組件 DOM 結構就是映射到這個虛擬 DOM 上，React 在這個虛擬 DOM 上實現了一個 diff 算法，當要更新組件的時候，會經過 diff 尋找到要變動的 DOM 節點，再把這個修改更新到瀏覽器實際的 DOM 節點上，因此實際上不是真的渲染整個 DOM 樹。這個虛擬 DOM 是一個純粹的 JS 數據結構，因此性能會比原生 DOM 快不少