Skip to main content

Virtual DOM 的真正價值：從函數式 UI 到跨平台渲染

1. 為「函數式 UI 編程」打開大門​

  • 以前寫前端要命令式操作 DOM，像是 document.createElement、appendChild、removeChild，邏輯繁瑣且難以維護。

  • 有了 Virtual DOM，你只需要描述 UI 的狀態（用函數把 state → UI 的映射表達出來），至於「如何更新 DOM」則交給 Virtual DOM 的 diff 算法處理。

  • 這樣就能推動 聲明式 + 函數式 的 UI 編程方式：只管「現在的樣子」，不用自己手動追蹤「如何從之前變到現在」。

2. 抽象出「渲染層」，不侷限於瀏覽器 DOM​

  • Virtual DOM 本質上是一個抽象層，UI 描述並不一定要渲染到 HTML DOM。

  • React 就是藉此把相同的概念擴展到：

    • Web → 真實的瀏覽器 DOM

    • Mobile → React Native（映射到 iOS / Android 的原生元件）

    • Desktop → React Native Windows、Electron

    • VR / AR → React 360

  • 這種「一次寫狀態邏輯，多端渲染」的可能性，才是真正突破性的價值。

額外延伸​

  • 如果單純追求性能，像 Svelte、SolidJS 就直接跳過 Virtual DOM，用 編譯時分析 + 精準更新，在跑分上比 React 高效。

  • 但 React 借助 Virtual DOM 提供的抽象，才有辦法做出 生態、跨平台能力、開發體驗 這些長遠優勢。