前端技術的快速發展，讓現在的vue、react成為主流框架

一開始的靜態頁面，到後來的jquery，到現在的vue、react，mvvm、mvc前端開發模式都使用了虛擬dom
但縱觀主流框架好像也是對虛擬dom 的各種造作和改進
為什麼要使用虛擬dom呢?

首先我們瞭解下什麼是虛擬dom

1. 虛擬 DOM 是 JS 物件
2. 虛擬 DOM 是對真實 DOM 的描述

<h1 className="greeting">Hello, world! </h1>

這個標籤在react會展示為如下型別：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};
 

React 中的虛擬 DOM 大致是如何工作的。虛擬 DOM 在 React 元件的掛載階段和更新階段工作流程如下：

• 掛載階段，React 將結合 JSX 的描述，構建出虛擬 DOM 樹，然後通過 ReactDOM.render 將dom樹轉換為真實的dom,掛載到頁面上；

• 更新階段，頁面在作用於真實 DOM 之前，會先作用於虛擬 DOM，虛擬 DOM 將在 JS 層藉助diff演算法先對比出具體有哪些真實 DOM 需要被改變，然後再將這些改變作用於真實 DOM,進行更新渲染。

虛擬DOM保留了真實DOM節點的一些基本屬性，和節點之間的層次關係，把它們放在一個物件中，它相當於在javascript和DOM之間的一層“快取”

虛擬DOM是如何解決問題的

React 使用了 JSX，一種使用體驗和模板相似的 JS 語法糖。

JSX 是 JavaScript 的一種語法擴充套件，它和模板語言很接近，但是它充分具備 JavaScript 的能力。

實際上瀏覽器並沒有解析jsx的能力

這裡Babel將jsx轉換為具有JavaScript的能力，Bable將jsx程式碼轉換為大部分低版本瀏覽器也能夠識別的 ES5 程式碼

區別就在於多出了一層虛擬 DOM 作為緩衝層。這個緩衝層帶來的利好是：當 DOM 操作（渲染更新）比較頻繁時，它會先將前後兩次的虛擬 DOM 樹進行對比，定位出具體需要更新的部分，生成一個“補丁集”，最後只把“補丁”打在需要更新的那部分真實 DOM 上，實現精準的“差量更新”。這個過程對應的虛擬 DOM 工作流如下圖所示：

這裡對diff演算法沒有做太多的解釋，想了解的可以看看原始碼

React 選用虛擬 DOM，真的是為了更好的效能嗎？

關於這個問題，可以看看大佬的回答(https://www.zhihu.com/question/31809713)

其實虛擬dom的好處是“使得前端開發能夠基於函式式 UI 的程式設計方式實現高效的宣告式程式設計”
虛擬 dom 的存在，不能片面的去說它解決了真實 dom 更新檢視帶來的效能問題，是提升檢視渲染效能存在的。虛擬 dom 是讓 diff 演算法提供了可能。並且為編譯多平臺程式碼提供了可能，我們可以在虛擬 dom 轉化為真實節點這一步，做跨平臺的文章。還有一點便是提升開發體驗和提高開發效率，讓 ui=fn（state）這樣資料驅動檢視的函式式、宣告式程式設計變為可能，JSX 便是其中一個品類。

碼字不易，請大佬指教！