什么是 JSX? 为什么要用 JSX?
2022年10月24日
💎 加入 E+ 成長計畫 如果你喜歡我們的內容,歡迎加入 E+,獲得更多深入的軟體前後端內容
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 规则
- 回传单一个根元素: 如果有一元件最终回传多个元素,我们需要将这些元素用一元素包起来当做父层元素(例如用
<div>
或使用Fragment (<> 和</>
)。 - 所有标签都需要 Close: JSX 要求所有标签都需要有结尾,self-closing 这类型的标签,例如:
<img>
一定要用<img />
表示。 - 几乎所有属性名称是用 camelCase 表示: JSX 最终会被转换为 JavaScript,而 JavaScript 会对变数名称有限制,像是不能使用保留字和连接号,所以在写 JSX 时,才会将许多属性名称用camelCase 的方式书写。举例来说:如果要加入 css 的 class,会用
className
、stroke-width
会改成使用strokeWidth
。但还是有例外,aria-*
和data-*
属性的写法,还是与 HTML 中相同写法。