-
JSX
鎖定
JSX是一種JavaScript的語法擴展，首先運用於React中，其格式比較像是模版語言，但事實上完全是在JavaScript內部實現的。元素是構成React應用的最小單位，JSX就是用來聲明React當中的元素。React主要使用JSX來描述用户界面，但React並不強制要求使用JSX
[1]
，而JSX也在React之外的框架得到了廣泛的支持，包括Vue.js
[3]
，Solid
[2]
等。
- 外文名
- JSX
- 解 釋
- 一種JavaScript的語法擴展
JSXJSX特點
JSX可以使用引號來定義以字符串為值的屬性：
const element = <div tabIndex="0"></div>;
也可以使用大括號來定義以JavaScript表達式為值的屬性：
const element = <img src={user.avatarUrl} />;
因為JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小駝峯）命名來定義屬性的名稱，而不是使用HTML的屬性名稱。例如：class變成了className，而tableindex則對應着tableIndex。
JSX使用方法
JSX嵌套格式
JSX標籤是閉合式的，像XML/HTML一樣在結尾處用/>表示：
const element = <img src={user.avatarUrl} />;
JSX標籤同樣可以相互嵌套：
JSX嵌入表達式
在JSX中可任意使用JavaScript表達式，但要包含在大括號裏，例如：2 + 2，user.firstName，以及formatName(user)都是可以使用的。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
書寫JSX的時候一般都會帶上換行和縮進，這樣可以增強代碼的可讀性。與此同時在JSX代碼的外面擴上一個小括號，這樣可以防止分號自動插入的bug。
JSX本身其實也是一種表達式
在編譯之後，JSX會被轉化為普通的JavaScript對象。所以可以在if或者for語句裏使用JSX，將它賦值給變量，當作參數傳入，作為返回值都是允許的：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
JSX防注入攻擊
在JSX中嵌入用户輸入是安全的：
const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危險內容的字符串放入大括號中，這是比較安全的做法
const element = <h1>{title}</h1>;
JSX表示對象
Babel轉譯器會把JSX轉換成一個名為React.createElement()的方法調用。
下面兩種代碼的作用是完全相同的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, world!'
);
React.createElement()這個方法首先會進行一些避免bug的檢查，之後會返回一個類似下面例子的對象：
// 注意: 以下示例是簡化過的（不代表在 React 源碼中是這樣）
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
這樣的對象被稱為“React 元素”。它代表所有顯示在屏幕上的東西。React通過讀取這些對象來構建DOM並保持數據內容一致。
- 參考資料
-
- 1. JSX 簡介 ．React 中文文檔[引用日期2019-01-31]
- 2. Introduction/JSX ．Solid官網[引用日期2022-06-28]
- 3. Render Functions & JSX | Vue.js ．Vue.js官網[引用日期2022-06-28]
- 4. 為什麼使用 JSX？ ．react文檔．2020-01-05[引用日期2022-12-23]
