注意：本節主要講React中的虛擬DOM，但是虛擬DOM并不是React中特有的內容。

1. React 中虛擬 DOM是什么？

虛擬DOM是對真實DOM的描述，虛擬DOM是JS對象，實際上就是 JSX 通過 babel 轉換成 React.createElement()，然后這個函數執行后變成的 JS 對象。關于JSX的介紹可以參考我的這篇文章 JSX 代碼是如何成為 DOM 的？。

2. React 中虛擬DOM是如何工作的？

虛擬DOM在組件掛載和更新階段都會出現，工作流程如下：

• 掛載階段：React 將結合 JSX 的描述，構建出虛擬 DOM 樹，然后通過 ReactDOM.render 實現虛擬 DOM 到真實 DOM 的映射。

• 更新階段：頁面的變化在作用于真實 DOM 之前，會先作用于虛擬 DOM，虛擬 DOM 將在 JS 層借助算法先對比出具體有哪些真實 DOM 需要被改變，然后再將這些改變作用于真實 DOM。

3. React 中為什么需要虛擬DOM？

使用虛擬DOM主要有下面三方面的優勢：

1. 提升性能

   傳統的web開發中都是直接操作真實DOM來更新頁面，這些操作非常消耗性能，特別是在數據頻繁變化的情況下。

2. 提高開發效率

   手動操作DOM非常麻煩而且容易出錯，通過使用虛擬 DOM可以將更新邏輯抽象為對虛擬DOM的操作，也就是對JS對象的操作。

3. 跨平臺兼容性

   虛擬 DOM 是對真實渲染內容的一層抽象。若沒有這一層抽象，那么視圖層將和渲染平臺緊密耦合在一起，為了描述同樣的視圖內容，你可能要分別在 Web 端和 Native 端寫完全不同的兩套甚至多套代碼。但現在中間多了一層描述性的虛擬 DOM，它描述的東西可以是真實 DOM，也可以是iOS 界面、安卓界面、小程序…同一套虛擬 DOM，可以對接不同平臺的渲染邏輯，從而實現“一次編碼，多端運行”，如下圖所示。

   

完，如有不恰當地方歡迎指正。