什麼 React 不直接操作 DOM？
既然瀏覽器本來就能用 document.querySelector()、innerHTML 來更新畫面，為什麼還要搞一個「Virtual DOM」？

概念解釋

Virtual DOM（虛擬 DOM）是 React 用來更新 UI 的一種策略。
它並不是取代真實 DOM，而是存在 記憶體中的 JavaScript 物件樹，用來模擬真實 DOM 的結構。

當 state 或 props 改變時：

1. React 建立一個新的 Virtual DOM。
2. React 把新的 Virtual DOM 和舊的 Virtual DOM 比較（Diff）。
3. 找出差異後，React 只更新真實 DOM 裡必要的部分。

為什麼不直接改 DOM？

因為 直接操作 DOM 很昂貴：

• 每次更新都可能觸發 reflow（回流） → 瀏覽器必須重新計算元素位置與大小。
• 接著又會觸發 repaint（重繪） → 瀏覽器必須重新畫出元素像素。
• 如果每個 state 改變都立即修改真實 DOM，就會造成大量 reflow/repaint → 效能差。

Virtual DOM 的解法是：

• 先在記憶體計算變化（便宜的操作）。
• 再一次性套用最小變動集到真實 DOM。
• 減少 reflow/repaint 的次數。

範例程式碼

傳統操作 DOM

const el = document.createElement("div");
el.textContent = "Hello";
document.body.appendChild(el);

• 你必須手動管理 DOM。
• 每次資料改變 → 你自己追蹤要改哪些部分。

React + Virtual DOM

function App({ name }) {
  return <div>Hello {name}</div>;
}

• 你只要宣告「UI 在某個狀態下應該長什麼樣子」。
• React 幫你處理差異與更新。

常見誤解

• ❌ 「Virtual DOM 永遠比直接操作 DOM 快」

  • 真相：Virtual DOM 本身也有計算成本。
  • 在靜態頁面或簡單場景下，直接 DOM 操作更快。
  • Virtual DOM 的優勢是在 複雜應用、多次更新 的情境下。

實務應用價值

• 效能優化：降低 reflow/repaint 的次數。
• 開發體驗：你不用手動追蹤 UI 更新，只要宣告 UI = f(state, props)。
• 跨平台能力：Virtual DOM 並不依賴瀏覽器，React Native 也能使用同樣概念。

小練習

判斷以下操作會觸發什麼：

1. 改變文字內容 → reflow + repaint
2. 改變背景顏色 → repaint
3. 改變 width → reflow + repaint
4. 改 JS 變數（不涉及 DOM）→ 不會觸發

面試口語回答模板

英文口語版

Virtual DOM is basically a lightweight copy of the real DOM kept in memory.
Whenever state or props change, React builds a new one, compares it with the old one, and figures out what’s different.
Then it updates only those parts in the real DOM instead of re-rendering everything.
This way we avoid too many reflows and repaints, and the UI feels much faster.

中文口語版

Virtual DOM 你可以把它想像成真實 DOM 的「記憶體副本」。
每次 state 或 props 改變，React 會先在記憶體裡做一份新的 Virtual DOM，然後跟舊的比，看看哪裡不同。
最後它只動真實 DOM 裡需要更新的部分，而不是整棵都重畫。
這樣就可以避免過多的 reflow 跟 repaint，效能就順很多。

總結

• Virtual DOM 是 React 在記憶體裡建立的 DOM 樹。
• React 更新時會先 diff 新舊 Virtual DOM，再一次性 patch 真實 DOM。
• 目的：減少 reflow/repaint → 效能更好。
• 真正的價值：更好的開發體驗 + 較佳的效能平衡。