DOM 與 Virtual DOM

DOM（Document Object Model，文件物件模型）是瀏覽器用來表示網頁結構的一種程式介面。當你寫好 HTML 程式碼後，瀏覽器會將其解析成一個樹狀結構（DOM Tree），每個 HTML 標籤（例如 <div>、<p>、<input>）都會變成一個節點（Node）。這些節點可以透過 JavaScript 來操作，像是修改內容、樣式或結構。

DOM 的運作方式

當網頁載入時，瀏覽器會根據 HTML 建立 DOM Tree。
如果你用 JavaScript 改變某個元素（例如修改文字或新增一個按鈕），DOM 會直接更新，瀏覽器也會重新渲染（render）畫面。
問題：直接操作 DOM 的效率較低，因為每次修改（例如改變文字、樣式）都會觸發瀏覽器的重排（reflow）或重繪（repaint），這些操作很耗資源，尤其是當網頁結構複雜或頻繁更新時。

範例：直接操作 DOM

假設你有一個簡單的 HTML：

<div id="myDiv">Hello, World!</div>
<button onclick="updateText()">點我更新</button>

用 JavaScript 修改 DOM：

function updateText() {
  const div = document.getElementById("myDiv");
  div.innerText = "Hello, React!";
}

這段程式碼會直接找到 #myDiv 並修改它的文字內容，但如果你的網頁有很多元素需要頻繁更新，這種方式會變得很慢，因為每次修改都直接影響真實 DOM。

什麼是 Virtual DOM？

Virtual DOM（虛擬 DOM）是 React 提出的一種概念，它是一個存在於記憶體中的「輕量版 DOM」。Virtual DOM 並不是真的 DOM，而是一個 JavaScript 物件，模擬真實 DOM 的結構。React 會用 Virtual DOM 來追蹤網頁的狀態變化，然後以高效的方式更新真實 DOM。

Virtual DOM 的運作方式

建立 Virtual DOM：React 會根據你的元件（Component）產生一個 Virtual DOM Tree，這是一個純 JavaScript 物件，描述網頁當前的狀態。
狀態改變：當元件的狀態（state）或屬性（props）改變時，React 會生成一個新的 Virtual DOM Tree。
比對（Diffing）：React 會比較舊的 Virtual DOM 和新的 Virtual DOM，找出兩者之間的差異（這個過程叫 Diffing）。
高效更新：React 只會把有變化的部分（最小改動）應用到真實 DOM 上，減少不必要的重排或重繪。

Virtual DOM 的優勢

高效能：因為 Virtual DOM 是純 JavaScript 物件，操作它比直接操作真實 DOM 快得多。
批量更新：React 會把多次改變合併成一次更新，減少對真實 DOM 的操作次數。
簡化開發：你不需要手動操作 DOM，React 會自動幫你處理更新邏輯。

範例：React 使用 Virtual DOM

以下是一個簡單的 React 元件，展示 Virtual DOM 的運作：

import React, { useState } from "react";

function App() {
  const [text, setText] = useState("Hello, World!");

  const handleClick = () => {
    setText("Hello, React!");
  };

  return (
    <div>
      <div>{text}</div>
      <button onClick={handleClick}>點我更新</button>
    </div>
  );
}

export default App;

運作過程：

當 text 狀態改變（透過 setText），React 會生成一個新的 Virtual DOM。
React 比較新的 Virtual DOM 和舊的 Virtual DOM，發現只有 <div> 內的文字改變。
React 只更新真實 DOM 中對應的文字內容，而不是重新渲染整個頁面。