前几天得到一个疑问，为什么 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 = [
Foo DOM...
,
Bar DOM...
,];if (props.reverse) {Content.reverse();}return 
{Content}
;
}

如果通过模板来实现，在不抽象子组件的情况下，foo 和 bar 的模板结构需要重复写两遍，才能满足这个需求：

因此，在动态性强的场景下，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和三目表达式都可以实现

模板：

yes
no

jsx:

{ok.value ? 
yes
 : no}

vue3示例:

setup() {const isShow = falseconst element = () => {if (isShow) {return 我是if} else {return 我是else}}return () => (
isShow}>我是v-show{element()}{isShow ? 
我是三目1
 : 
我是三目2
}
)
}

v-for

• 同样，jsx/tsx 中也没有 v-for指令，需要渲染列表我们只需要使用Js 的数组方法map就可以了

模板：

{{ text }}

jsx:

{items.value.map(({ id, text }) => {return 
{text}
})}

vue3示例:

setup() {const listData = [{name: 'Tom', age: 18},{name: 'Jim', age: 20},{name: 'Lucy', age: 16}]return () => (
'box'}>姓名年龄
{prop.listData.map(item => {return 
'box'}>{item.name}{item.age}
})}
)
}

v-on

以 on 开头，并跟着大写字母的props会被当作事件监听器。比如，onClick 与模板中的 @click 等价。

 {/* ... */}}
>click me

事件修饰符

对于 .passive、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：

 {}}onKeyupOnce={() => {}}onMouseoverOnceCapture={() => {}}
/>

class与style 绑定

class类名绑定有两种方式，使用模板字符串或者使用数组。

// 使用模板字符串两个类名之间使用空格隔开
`header ${ isBg ? 'headerBg' : '' }`}>header
//数组
 [ 'header', isBg && 'headerBg' ] } >header
// style绑定需要使用 双大括号
const color = 'red'
const element = { color, fontSize: '16px' }}>style

四、使用举例

在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。

如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴露的方法。

1. 子组件暴露方法

SFC（.vue）暴露方法

在使用 .vue 定义的组件中，setup 中提供了 defineExpose() 方法，该方法可以将组件内部的方法暴露给父组件。

创建子组件 demo-component-sfc.vue：

​

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 () => (() => demoFun('child')}>demo component tsx)}
})

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 () => (<>
sfcRef} />onBtnClick1}>parent button
​
tsxRef} />onBtnClick2}>parent button
)}
})

备注：<>这样浏览器渲染html是为没有元素的，节省了一个盒子的位置。

https://juejin.cn/post/7151950058501373989