Virtual DOM 簡介

簡介

Virtual DOM 是現代前端開發中的關鍵概念，被 React 和 Vue.js 等框架用來最佳化 UI 的渲染流程。這些框架並非直接更新實際的 DOM，而是使用 DOM 的虛擬表示層，藉此提升效能與效率。

---

什麼是 Virtual DOM？

Virtual DOM 是儲存在記憶體中的實際 DOM 的副本，本身是一個 JavaScript 物件。當 UI 發生變化時，框架會先更新 Virtual DOM，然後再有效率地將必要的部分同步到真正的 DOM。

Virtual DOM 如何運作？

1. 建立 Virtual DOM

• 應用程式會建立一個以 JavaScript 物件為基礎的 UI 虛擬表示。

2. 比較 states 變化（Diffing Algorithm）

• 當 state 更新時，框架會建立一棵新的 Virtual DOM 樹。
• 接著透過「diffing」的過程，比較新舊兩棵樹的差異。

3. 更新（Reconciliation）
   • 系統只會更新真正 DOM 中有變動的部分。
   • 這大幅減少直接操作 DOM 的次數，提升渲染效能。

---

為什麼要使用 Virtual DOM?

1. 提升效能

• 直接修改 DOM 會很慢，因為它會觸發 reflow 和 repaint。
• Virtual DOM 透過最小化 DOM 更新，讓渲染更快速。

2. 簡化開發流程

• 開發者可以以宣告式方式撰寫 UI components，不需要自行最佳化 DOM 更新。
• 更新邏輯交由框架自動處理。

3. 跨平台一致性

• Virtual DOM 確保 UI 更新在不同平台與環境中有一致的行為。

---

React 的 Virtual DOM

React 是最知名善用 Virtual DOM 的框架之一。

以下是一個簡單的 React component：

jsx
1function Counter() {  
2  const [count, setCount] = React.useState(0);  
3  return (  
4    <div>  
5      <p>Count: {count}</p>  
6      <button onClick={() => setCount(count + 1)}>Increment</button>  
7    </div>  
8  );  
9}  

當 setCount 觸發 state 更新時，React 會：

1. 建立一個新的 Virtual DOM 樹。
2. 與上一版本進行 diffing。
3. 只更新真正 DOM 中已變動的部分。

---

Virtual DOM vs. Real DOM

Feature	Virtual DOM	Real DOM
Performance	更新較快	更新較慢
Complexity	由框架自動處理	需手動維護
Efficiency	最小化重新渲染	可能整個重新渲染

---

結論

Virtual DOM 是現代前端框架的重要創新，透過改善效能與簡化 UI 更新流程，讓開發者能建立更高效、可擴展的 Web 應用程式。理解它的運作方式能幫助我們寫出更穩定與效能更佳的前端程式碼。