Virtual DOM 是一個模擬 DOM 樹的 JavaScript 對象。 React 使用 Virtual DOM 來渲染 UI，當(dāng)組件狀態(tài) state 有更改的時候，React 會自動調(diào)用組件的 render 方法重新渲染整個組件的 UI。
React 主要的目標(biāo)是提供一套不同的, 高效的方案來更新 DOM.不是通過直接把 DOM 變成可變的數(shù)據(jù), 而是通過構(gòu)建 “Virtual DOM”, 虛擬的 DOM, 隨后 React 處理真實的 DOM 上的更新來進(jìn)行模擬相應(yīng)的更新。

引入額外的一個層怎么就更快了呢?
那不是意味著瀏覽器的 DOM 操作不是最優(yōu)的, 如果在上邊加上一層能讓整體變快的話?是有這個意思, 只不過 virtual DOM 在語義上和真實的 DOM 有所差別.最主要的是, virtual DOM 的操作, 不保證馬上就會產(chǎn)生真實的效果.這樣就使得 React 能夠等到事件循環(huán)的結(jié)尾, 而在之前完全不用操作真實的 DOM。在這基礎(chǔ)上, React 計算出幾乎最小的 diff, 以最小的步驟將 diff 作用到真實的 DOM 上。批量處理 DOM 操作和作用最少的 diff 是應(yīng)用自身都能做到的.任何應(yīng)用做了這個, 都能變得跟 React 一樣地高效。但人工處理出來非常繁瑣, 而且容易出錯. React 可以替你做到。
前面提到 virtual DOM 和真實的 DOM 有著不用的語義, 但同時也有明顯不同的 API。
DOM 樹上的節(jié)點被稱為元素, 而 virtual DOM 是完全不同的抽象, 叫做 components。
component 的使用在 React 里極為重要, 因為 components 的存在讓計算 DOM diff 更高效。

簡單的說就是：
當(dāng)然如果真的這樣大面積的操作 DOM，性能會是一個很大的問題，所以 React 實現(xiàn)了一個虛擬 DOM，組件 DOM 結(jié)構(gòu)就是映射到這個虛擬 DOM 上，React 在這個虛擬 DOM 上實現(xiàn)了一個 diff 算法，當(dāng)要更新組件的時候，會通過 diff 尋找到要變更的 DOM 節(jié)點，再把這個修改更新到瀏覽器實際的 DOM 節(jié)點上，所以實際上不是真的渲染整個 DOM 樹。這個虛擬 DOM 是一個純粹的 JS 數(shù)據(jù)結(jié)構(gòu)，所以性能會比原生 DOM 快很多。