ReactJS - 使用不含 JSX 的 React

JSX 是什麼？

在我們深入探討不含 JSX 的 React 之前，讓我們先來了解 JSX 是什麼。JSX，或稱為 JavaScript XML，是 JavaScript 的語法擴展，看起來與 HTML 相似。它通常與 React 一起使用，用來描述 UI 應該是什麼樣子。然而，JSX 不是使用 React 的必要條件。React 可以在不使用 JSX 的情況下使用，這就是我們將在這個教程中探討的。

為何使用不含 JSX 的 React？

你可能會想，"既然 JSX 那麼常見，我們為什麼要使用不含 JSX 的 React 呢？" 好問題！有以下幾個原因：

1. 學習核心概念：了解不含 JSX 的 React 如何工作可以給你更深入的了解這個庫。
2. 建構工具的限制：有些構建環境可能不支持 JSX 的編譯。
3. 個人偏好：有些開發者簡單地偏好編寫純粹的 JavaScript。

使用 React.createElement() 創建元素

使用不含 JSX 的 React 的核心是 React.createElement() 函數。這個函數是 JSX 編譯後的結果，所以我們只是省略了中間人！

讓我們從一個簡單的例子開始：

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

在這個例子中，我們創建了一個帶有 'greeting' 類別的 h1 元素，並且內容為 'Hello, world!'。讓我們分解一下這些參數：

1. 第一個參數 ('h1') 指定了我們要創建的元素類型。
2. 第二個參數 ({className: 'greeting'}) 是一個包含元素屬性的對象。
3. 第三個參數 ('Hello, world!') 是元素的內容。

如果我們用 JSX 寫這個，會像這樣：

const element = <h1 className="greeting">Hello, world!</h1>;

看起來 JSX 縮短了很多，但別擔心，隨著練習，不使用 JSX 創建元素會變得習以為常！

嵌套元素

現在，讓我們試試更複雜一點的東西。如何創建一個包含兩個子元素的 div？

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Welcome'),
React.createElement('p', null, 'This is a paragraph.')
);

這會創建一個與以下結構等價的元素：

<div>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</div>

注意我們是如何嵌套 createElement 调用来創建子元素的。null 參數是我們在需要屬性時放置的地方。

創建組件

組件是 React 應用程序的基本構建塊。讓我們創建一個不含 JSX 的簡單函數組件：

function Welcome(props) {
return React.createElement(
'h1',
null,
'Welcome, ' + props.name
);
}

要使用這個組件，我們會這樣做：

const element = React.createElement(Welcome, {name: 'Alice'});

這等價於 JSX：

const element = <Welcome name="Alice" />;

處理事件

在不使用 JSX 的 React 中處理事件與使用 JSX 時非常相似。讓我們創建一個在點擊時記錄消息的按鈕：

function handleClick() {
console.log('Button clicked!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Click me'
);

在這裡，我們將 handleClick 函數作為按鈕元素的 onClick 屬性傳遞。

條件渲染

在不使用 JSX 的情況下，條件渲染會更冗長，但仍然完全可行：

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Welcome back!');
} else {
return React.createElement('h1', null, 'Please sign up.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

列表和鍵

在不使用 JSX 的情況下渲染列表需要我們顯式地使用 Array.map()：

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

注意我們仍然在使用 key 屬性，這對於 React 的調和過程至關重要。

方法表

這裡是一個總結我們討論過的關鍵方法的表格：

方法	描述	示例
React.createElement()	創建一個 React 元素	React.createElement('div', null, 'Hello')
Array.map()	轉換數組元素	numbers.map(n => React.createElement('li', null, n))
React.render()	將 React 元素渲染到 DOM	ReactDOM.render(element, document.getElementById('root'))

結論

雖然 JSX 確實讓編寫 React 代碼更直觀、易讀，但了解如何在不使用 JSX 的情況下使用 React 可以讓你更深入地了解底層發生的事情。這就像先學習開手動挡汽車再開自動挡汽車一樣 - 它給你更多的控制和理解過程的能力。

記住，無論你是否使用 JSX，React 的核心原則保持不變。組件、屬性、狀態和虚拟 DOM 的運作方式都是相同的。JSX 只是一種讓編碼過程更甜蜜的語法糖！

所以，下次當你在調試 React 應用程序並在編譯代碼中看到 React.createElement() 時，你就會知道到底發生了什麼。祝你編程愉快，願你的 React 元素總是準確渲染！

Credits: Image by storyset