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

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

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