什麼是 Virtual DOM?

Virtual DOM 是一種編程概念，不僅僅只在 React 中使用，在其他框架如 Vue 也應用了 Virtual DOM 的概念。然而，本文將重點關注 React Virtual DOM。 Virtual DOM 是通過 JavaScript 物件儲存在記憶體中，模擬真實 DOM 的方法。

Virtual DOM 比直接操作 DOM 更快速嗎?

許多人會認為使用 Virtual DOM 的好處是，比直接操作 DOM 更有效率更快速，但這個觀念並不完全正確。React 官方從來沒有宣稱 Virtual DOM 比直接操作 DOM 更為快速。相反的，使用 Virtual DOM 因為因為多一層操作，跟原生操作 DOM 相比，通常會比較慢。

那為什麼還要使用 Virtual DOM 呢?

React Virtual DOM 的好處

React 官方在文檔說明，使用 Virtual DOM 的好處是，可以使用聲明式語法編寫 React。換句話說，這意味著我們不需要直接操作 DOM，而是通過聲明式語法。使用聲明式的寫法讓開發者不需要直接操作 DOM，而是透過 state 來告訴 React 我們想要的 UI 畫面，React 會確保 DOM 和 state 是匹配的。

使用聲明式的寫法可以避免以下直接操作 DOM 的兩個問題：

當 DOM Tree 結構越來龐大時，會難以管理。例如，現在有一個很大表單元件，當改變一個值時，可能會需要遍歷所有表單元件的節點並操作 DOM 更改值，在這過程中很容易造成難以發現的 Bug。
效率很低。雖然操作 DOM 可能很快速，但在重繪跟回流階段的時候往往是造成畫面卡頓的主因，因此頻繁直接操作 DOM 越有可能導致效能的瓶頸。

通過使用 Virtual DOM 可以讓開發者只關注於 UI 狀態，不用擔心如何實現它。在渲染過程中，React 會自動生成 Virtual DOM，並且比較前後兩次 Virtual DOM 的差異，只更新發生變化的部分。