React 是一個用來操作 DOM 的 JavaScript 函式庫

DOM 是什麼

DOM 的全名是 Document Object Model （文件物件模型）

用途：

• 瀏覽器用來將文件的結構（如HTML）表示和操作
• 每個 HTML 標籤（如 <div>, <h1>）在 JavaScript 中都會變成一個「物件」
• 可以透過 JavaScript 操作 DOM 來改變畫面

原生 DOM 的缺點

• 需要手動使用JavaScript提供的API，例如document.getElementById, element.innerHTML等等
• 程式碼冗長、容易出錯
• 頻繁更新會導致效能開發大

Virtual DOM（虛擬 DOM）是什麼

• React 會把畫面內容（JSX）先轉成一個JavaScript的樹狀結構（虛擬 DOM）
• 每個元件或標籤在虛擬 DOM 中都是一個「物件」
• 每次狀態改變（例如按鈕被點擊）時，React 會比較新舊虛擬 DOM 之間的差異，找出真正需要改變的部分
• 最後只更新需要改變的部分到真實的DOM 上，不需要重新渲染整個畫面 → 更快更有效率

虛擬 DOM 的優點

• 降低直接操作 DOM 的成本
• 只專注在實際改變的部分，提高效能

虛擬 DOM 的缺點

• 每次更新都需要建立新的虛擬 DOM 樹，需引入額外的計算與記憶體開銷

比較

結論

DOM 是畫面的實際結構
React 幫助「自動化、高效地操作 DOM」
JSX 將 React 對應成 DOM