前几天得到一个疑问，为什么 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
