React Virtual DOM (VDOM)

一般在網頁開發中，更新 DOM 是最耗費瀏覽器資源的動作之一，每當有大量的 DOM 操作時，非常容易造成效能 (performance) 的瓶頸，所以 React 引進了一套出名的機制及功能 - Virtual DOM (virtual Document Object Model)。

Virtual DOM 的概念很簡單 - 操作 JavaScript 比操作 DOM 快太多了。

React 在記憶體中自己維護一個跟 DOM 一樣的 JavaScript 資料結構 (in-memory data structure cache)，每當元件資料有更新時，React 首先會去用自己的一套 diff 演算法去算出哪些 DOM 元素有改變需要做更新，接著才會實際去操作真實的 DOM；React 也會利用 batch 更新的技巧減少實際 DOM 的操作次數。

所以簡單的說 Virtual DOM 目的是最小化 DOM 操作，以便達到效能的最佳化。

Virtual DOM 讓開發者可以不用考慮到畫面更新時效能的問題，只需要管更新資料就好，剩下的就交給 React 來優化！