Skip to main content

為何React相較於Vue，是更符合原生JS的寫法呢

一、語法層面：React 幾乎完全依賴 JavaScript 語法​

React 採用 JSX（JavaScript + XML），但 JSX 最終會被 Babel 編譯成純 JavaScript。
也就是說，你在寫的程式碼本質上就是 JavaScript 函式的組合。

範例比較​

React：

function App() {
  const [count, setCount] = React.useState(0)

  return (
    <div>
      <p>你按了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>點我</button>
    </div>
  )
}

這段程式其實在編譯後會變成：

function App() {
  const [count, setCount] = React.useState(0)
  return React.createElement(
    "div",
    null,
    React.createElement("p", null, `你按了 ${count} 次`),
    React.createElement("button", { onClick: () => setCount(count + 1) }, "點我")
  )
}

可以看到，它最終就是 JavaScript 函式呼叫的結構，沒有額外語法糖或模板系統。

Vue：

<template>
  <div>
    <p>你按了 {{ count }} 次</p>
    <button @click="count++">點我</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Vue 的 <template> 是一種 模板語法（Template Syntax），
它會被 Vue 的編譯器（compiler）轉換成 render function，這過程中你幾乎不直接操作 JavaScript，而是用框架定義好的語法。

也就是說：

  • Vue 的邏輯與畫面是「分離的」（template + script）。

  • React 則是「邏輯與畫面融合在一起」，完全用 JavaScript 表達畫面結構。

二、思維層面：React 更貼近 JavaScript 的函式式思維（Functional Programming）​

React 的核心概念是：

「UI 是狀態的函式表現。」

這句話可以寫成：

UI = f(state)

也就是說，只要狀態變化，就重新呼叫函式產生新的 UI。
這種做法和純 JavaScript 函式運算邏輯完全一致。

例如：

function renderMessage(user) {
  return user.isLogin ? `Welcome ${user.name}` : "Please log in"
}

React 的 Component 本質就是這種「輸入狀態 → 輸出畫面」的函式。

而 Vue 則傾向使用「響應式物件（reactive object）」與「模板綁定」，它幫你在內部追蹤資料變化，更新畫面，不需你手動控制。
這讓 Vue 更像一個「框架」，React 則更像一個「程式庫」，給你 JavaScript 的原始控制感。

三、程式設計哲學：React 是 JavaScript-first，Vue 是 Framework-first​

面向ReactVue
核心概念Everything is JavaScriptTemplate + Directive 結構化
組件語法使用純 JS/JSX使用 SFC（Single File Component）
狀態控制useState, useReducer（純函式邏輯）ref, reactive（響應式封裝）
設計哲學函式導向（Functional）宣告導向（Declarative + 模板）
學習曲線初期略陡，但更貼近原生 JS 思考上手快，但抽象層較高

四、總結​

React 之所以被認為「更符合原生 JavaScript 寫法」，是因為：

  1. JSX 實際上是 JavaScript 函式的語法延伸，而非模板系統。

  2. Component 是純函式，狀態與畫面透過邏輯組合而非指令綁定。

  3. 你寫的每一段程式都能回推到原生 JS 的行為（沒有黑盒封裝）。

  4. 你可以運用原生語法（例如陣列的 map()、filter()）直接生成畫面。