跳至主要内容

[React] 什麼是 JSX? 為什麼要用 JSX?

什麼是 JSX? 為什麼要用 JSX?​

JSX 在語法上看起來與 HTML 相近，但它其實是 JavaScript 的語法擴展。它的特點是，UI 與 JavaScript 邏輯的相融 - 組合成元件。雖然 React 官方沒有強制要求使用 JSX 來開發 React，但使用上來說，大多數人覺得對開發體驗比較好，它也可以讓 React 顯示一些錯誤和提示訊息。

JSX 是什麼​

JSX 本質上做的事情是：生成 React 元素(elements)，它其實是 React.createElement(component, props, ...children) 函式的語法糖。可以看到下面的例子

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

等同於

React.createElement(MyButton, { color: "blue", shadowSize: 2 }, "Click Me")

為什麼要用 JSX?​

上面提到 JSX 本身就是 JavaScript，因此使用 JSX 等於是把標記 (markup) 與邏輯 (logic) 寫在一起。這直觀上有違寫程式的原則，畢竟寫程式要盡可能地把關注點分離 (separation of concerns)，內容呈現歸內容呈現、邏輯的部份歸邏輯，如果用了 JSX ，就等於把兩者混合在一起。那我們為什麼要用 JSX 呢？

原因在於現代的許多網站都是高度動態，許多邏輯會決定內容的呈現，這時把內容與邏輯放在一起 ，能確保有任何更動時兩者維持同步，以及在重複使用時也方便。與此同時，跟元件沒有相關的內容，可以被到另一個元件當中，這樣不同元件的改動也可以保持獨立，不怕改某個東西而影響了另一個元件。

JSX 規則​

  1. 回傳單一個根元素： 如果有一元件最終回傳多個元素，我們需要將這些元素用一元素包起來當做父層元素 (例如用 <div> 或使用 Fragment (<> 和 </>)。
  2. 所有標籤都需要 Close： JSX 要求所有標籤都需要有結尾，self-closing 這類型的標籤，例如：<img> 一定要用 <img /> 表示。
  3. 幾乎所有屬性名稱是用 camelCase 表示： JSX 最終會被轉換為 JavaScript，而 JavaScript 會對變數名稱有限制，像是不能使用保留字和連接號，所以在寫 JSX 時，才會將許多屬性名稱用 camelCase 的方式書寫。舉例來說：如果要加入 css 的 class，會用 className、stroke-width 會改成使用 strokeWidth。但還是有例外，aria-* 和 data-* 屬性的寫法，還是與 HTML 中相同寫法。
最後於 更新