前几天得到一个疑问,为什么 React 要用 JSX 语法,这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离,这样设计的优越性到底在哪里?
一、jsx是什么?
JSX,即 javascript Xml的缩写,是Facebook开源的React框架里提供的语法糖,可以在JS中使用HTML语言。
官网原文:
JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
二、为什么一些组件库在使用 jsx/tsx?
对于 JSX
和 template
(模板渲染),在大部分场景下是推荐使用 template
的(尤其是在业务场景下)。Vue 3 基于 template
分析做了很多优化,并且对使用者是透明的,编译器默默地完成了所有的优化操作。而使用 JSX
的话,则需要手动进行一些优化操作。
例如关于 Vant组件库 为什么选择 JSX,主要原因是组件库代码比业务代码具有更强的动态性,使用 JSX 可以很灵活地控制动态 DOM 片段。
举个例子,假设有一个场景,需要根据 props
上的 reverse
属性,来决定是否要调换两块内容的渲染顺序。
在 JSX 中可以很容易实现:
const renderContent = () => {
const Content = [
<div class="foo">Foo DOM...</div>,
<div class="bar">Bar DOM...</div>,
];
if (props.reverse) {
Content.reverse();
}
return <div>{
Content}</div>;
}
如果通过模板来实现,在不抽象子组件的情况下,foo 和 bar 的模板结构需要重复写两遍,才能满足这个需求:
<template>
<div>
<template v-if="reverse">
<div class="bar">Bar DOM...</div>
<div class="foo">Foo DOM...</div>
</template>
<template v-else>
<div class="foo">Foo DOM...</div>
<div class="bar">Bar DOM...</div>
</template>
</div>
</template>
因此,在动态性强的场景下,JSX 会有一定优势。
总的来说:
Composition API + template
是最具性价比的选择,
Composition API + JSX
是某些场景下追求极致的选择,相应地需要付出更多开发成本。JSX 胜在灵活性,在某些动态性要求较高的情况下,JSX 成了标配。
三、jsx/tsx快速上手
在 JSX 表达式中,使用小括号 ( )
包裹JSX
代码,使用大括号 { }
来嵌入动态值。vue中的用法详见:渲染函数 & JSX
Vue 的类型定义也提供了 TSX 语法的类型推导支持。当使用 TSX 语法时,确保在
tsconfig.json
中配置了"jsx": "preserve"
,这样的 TypeScript 就能保证 Vue JSX 语法编译过程中的完整性。
v-if
- jsx/tsx中只保留了
v-show
指令,没有v-if
指令 - 使用
if/else
和三目表达式都可以实现
模板:
<div>
<div v-if="ok">yes</div>
<span v-else>no</span>
</div>
jsx:
<div>
{ok.value ? <div>yes</div> : <span>no</span>}
</div>
vue3示例:
setup() {
const isShow = false
const element = () => {
if (isShow) {
return <span>我是if</span>
} else {
return <span>我是else</span>
}
}
return () => (
<div>
<span v-show={
isShow}>我是v-show</span>
{
element()
}
{
isShow ? <p>我是三目1</p> : <p>我是三目2</p>
}
<div>
)
}
v-for
- 同样,jsx/tsx 中也没有
v-for
指令,需要渲染列表我们只需要使用Js 的数组方法map
就可以了
模板:
<ul>
<li v-for="{ id, text } in items" :key="id">
{
{ text }}
</li>
</ul>
jsx:
<ul>
{
items.value.map(({ id, text }) => {
return <li key={id}>{text}</li>
})
}
</ul>
vue3示例:
setup() {
const listData = [
{
name: 'Tom', age: 18},
{
name: 'Jim', age: 20},
{
name: 'Lucy', age: 16}
]
return () => (
<div>
<div class={
'box'}>
<span>姓名</span>
<span>年龄</span>
</div>
{
prop.listData.map(item => {
return <div class={
'box'}>
<span>{
item.name}</span>
<span>{
item.age}</span>
</div>
})
}
</div>
)
}
v-on
以 on
开头,并跟着大写字母的props
会被当作事件监听器。比如,onClick
与模板中的 @click
等价。
<button
onClick={(event) => {
/* ... */
}}
>
click me
</button>
事件修饰符
对于 .passive
、.capture
和 .once
事件修饰符,可以使用驼峰写法将他们拼接在事件名后面:
<input
onClickCapture={() => {}}
onKeyupOnce={() => {}}
onMouseoverOnceCapture={() => {}}
/>
class与style 绑定
class类名绑定有两种方式,使用模板字符串或者使用数组。
// 使用模板字符串两个类名之间使用空格隔开
<div className={
`header ${
isBg ? 'headerBg' : '' }`}>header</div>
//数组
<div class={
[ 'header', isBg && 'headerBg' ] } >header</div>
// style绑定需要使用 双大括号
const color = 'red'
const element = <sapn style={
{
color, fontSize: '16px' }}>style</sapn>
四、使用举例
在开发中会遇到这样的需求:获取子组件的引用,并调用子组件中定义的方法。
如封装了一个表单组件,在父组件中需要调用这个表单组件的引用,并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能,首先要在子组件中暴露父组件需要调用的函数,然后去父组件中获取子组件的引用,最后通过子组件的引用调用子组件暴露的方法。
1. 子组件暴露方法
SFC(.vue)暴露方法
在使用 .vue 定义的组件中,setup 中提供了 defineExpose()
方法,该方法可以将组件内部的方法暴露给父组件。
创建子组件 demo-component-sfc.vue:
<template>
<el-button type="primary" @click="demoFun('child')">demo component sfc</el-button>
</template>
<script lang="ts" setup name="demo-component-sfc">
const demoFun = (str: string) => {
console.log('demo component sfc', str)
}
// 使用 defineExpose 暴露组件内部的方法
defineExpose({
demoFun })
</script>
TSX(.tsx)暴露方法
使用 .tsx 方式定义的组件,也是通过参数 context 中的 expose() 方法暴露组件内容的方法。
创建子组件 demo-component-tsx.tsx:
import {
defineComponent } from 'vue'
export default defineComponent({
name: 'demo-component-tsx',
setup (props, context) {
const demoFun = (str: string) => {
console.log('demo component tsx', str)
}
// 使用 expose 暴露组件内部的方法
context.expose({
demoFun })
return () => (
<el-button type="primary" onClick={
() => demoFun('child')}>demo component tsx</el-button>
)
}
})
2. 父组件调用子组件中的方法
在 .tsx 中获取组件的引用,首先定义一个 ref 变量,然后将该变量设置给子组件的 ref 属性即可。
import {
defineComponent, ref } from 'vue'
import DemoComponentSfc from '@/components/ref/demo-component-sfc.vue'
import DemoComponentTsx from '@/components/ref/demo-component-tsx'
export default defineComponent({
name: 'demo-ref-tsx',
setup () {
const sfcRef = ref()
const onBtnClick1 = () => {
if (sfcRef.value) {
sfcRef.value && sfcRef.value.demoFun('parent')
}
}
const tsxRef = ref()
const onBtnClick2 = () => {
if (tsxRef.value) {
tsxRef.value && tsxRef.value.demoFun('parent')
}
}
return () => (
<>
<div>
<DemoComponentSfc ref={
sfcRef} />
<el-button onClick={
onBtnClick1}>parent button</el-button>
</div>
<div style="margin-top: 10px;">
<DemoComponentTsx ref={
tsxRef} />
<el-button onClick={
onBtnClick2}>parent button</el-button>
</div>
</>
)
}
})
备注:<></>
这样浏览器渲染html是为没有元素的,节省了一个盒子的位置。
https://juejin.cn/post/7151950058501373989