您好，我是沧沧凉凉，是一名前端开发者，目前在掘金、知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识，欢迎关注。
本篇文章是我在去年6月份就准备写的，但那个时候仅仅使用React做了一个多月的项目，所以对很多JSX的使用方法并没有那么得心应手，后面经过长达半年的使用，我发现JSX能够做到的事情太多了，以及JSX创建一些复用性组件上也比Vue模板语法具有更大的优势。
事先声明：Vue和React各有各的优势，本篇文章有些地方是为了对比而不是踩一捧一。
1. 创建可复用组件
能创建可复用组件没有什么稀奇的，现代前端框架都可以创建可复用组件，但在JSX中你创建的组件只要你愿意，组件中的所有内容都可以很方便的进行修改。
在我从Vue切换到React时创建组件的时候去React官方文档上面找过一个Vue有的功能：插槽。
在Vue中只要你创建组件，那么大部分情况都是需要使用到插槽的，但是我在React文档中找了老半天，貌似React中没有这个概念，当时我还感觉到很奇怪，因为没有这个东西那么创建组件的时候复用性就没有那么高。
经过我的仔细研究，我发现React中根本不需要有插槽，因为JSX语法带来了一种更加强大的写法，任何Props属性都可以作为插槽。
思考一个场景，如果你要更改自定义组件上的图标，或者将文字改成按钮，那你可以考虑下在Vue中怎么进行实现，没错，几乎最好的方式就是使用插槽，那如果你要改变底部的两个按钮的名字呢，使用Vue会如何进行实现？那如果你不想要这两个按钮，想自定义底部，或者根本都不需要底部，那么你使用Vue应该怎么实现呢？
上面的一系列问题是不是让你感到非常的头疼，如果有更多需要自定义的地方，你是不是要在Vue中大量使用插槽，甚至动态插槽？而在JSX中可以很简单的解决这些问题。
我们来看一下下面的这个例子，你可以想象一下如果是使用Vue的话如何进行创建此类型的组件。
在JSX中，没有插槽这个概念，但它具有比插槽更好用的特性，那就是组件上面的所有属性都可以作为插槽，插入ReactNode，比起插槽来讲，JSX的这种方式简便直观，比如下面的这段代码。
import React from "react";
interface TestProps {
children: React.ReactNode;
buttonRender?: React.ReactNode;
}
function Test({ buttonRender, children }: TestProps) {
return (
<>
{children}
{buttonRender}
</>
);
}
export default function App() {
return (
<div className="App">
<Test buttonRender={<button>这里可以传入dom</button>}>测试</Test>
</div>
);
}
最终渲染结果如下：
可不要小看这个功能，在创建自定义组件的时候是非常实用的，它可以给使用这个组件的用户极大的定制权，比如我们改一下上面的代码：
import React from "react";
interface TestProps {
children: React.ReactNode;
buttonRender?: React.ReactNode;
}
function Test({ buttonRender, children }: TestProps) {
return (
<>
{children}
{buttonRender || <button>这里默认的按钮</button>}
</>
);
}
export default function App() {
return (
<div className="App">
<Test>测试</Test>
</div>
);
}
渲染结果：
总的来说，你可以给一个默认的ReactNode，如果用户不传入属性，那么就显示这个默认的ReactNode，如果一旦传入属性值，则替换默认的ReactNode。
但是这里需要强调的是，跟Vue的插槽一样，这种通过属性渲染的ReactNode，是没有办法读取子节点上的属性的，会直接报错：
总之，React的任何Props属性都可以作为插槽进行使用，这给组件创建带来了极强的可定制性，如果你有使用过Antd，你会发现Antd这个组件库有非常多的地方都可以让你进行定制。
2. 使用变量及函数
在很多时候，我们想要转换一些页面上的值，如果是在Vue模板语法中你要使用第三方库中提供的函数，那么你需要在data中进行声明，才能够在模板语法中使用 。我们以monentjs中为例，就要下面这么操作：
<template>
<div id="app">
{{ moment().format("h:mm:ss") }}
</div>
</template>
<script>
import moment from "moment";
export default {
name: "App",
data() {
return {
// 这里需要导出才能在界面上使用
moment,
};
},
};
</script>
而在JSX中，你可以直接引用第三方库或者你在其它地方定义的函数，我们还是以monentjs为例，你可以直接在JSX中进行使用：
import moment from "moment";
export default function App() {
return <div className="App">{moment().format("h:mm:ss")}</div>;
}
在模板语法中使用第三方库会比JSX多出一步导出步奏，而且由于Vue中你声明在data属性中是会自动进行双向绑定的，可能会导致一些性能上的问题或其它意料之外的BUG，当然你也可以使用Vue高级语法取消双向绑定，甚至冻结该属性，就是操作起来麻烦一点。
3. 任意提取ReactNode
JSX最为灵活的地方就是你可以将任意的ReactNode写在函数中，直接在JSX中进行使用，这样的好处在于如果你提取成新的组件，那么就涉及到传值的问题，但是你提取成函数，可以直接引用当前函数中已经声明的变量，可能表达起来比较麻烦，所以我们直接看一下下面的例子：
import { useState } from "react";
export default function App() {
const [title, setTitle] = useState("Hello world!");
// 这里可以提取ReactNode
const show = <h1>{title}</h1>;
return (
<div className="App">
{/* 直接使用 */}
{show}
<button
onClick={() => {
setTitle("同样可以改变");
}}
>
点我
</button>
</div>
);
}
上面的代码最终的效果就如下图所示：
JSX具有的这项特性，可以创建非常多的骚操作，同时它可以配合useMemo进行使用，我在书写项目的时候，有时候也会使用到这种写法，比如下面的情况
import { useMemo, useState } from "react";
import "./styles.css";
export default function App() {
const [count, setCount] = useState(0);
const show = useMemo(() => {
if (count === 0) return <div>Hello World！</div>;
return (
<img
src="https://pic.qqtn.com/up/2019-9/15690311636958128.jpg"
alt="图片"
/>
);
}, [count]);
return (
<div className="App">
{show}
<button
onClick={() => {
setCount(1);
}}
>
点我
</button>
</div>
);
}
上面的代码渲染出来就是下面的样子：
4. 递归组件
使用JSX最大的好处之一，递归组件。在Vue模板语法中几乎很难写出递归组件，不过使用Vue也并不是无法写出递归组件。
至于递归组件，我在很早的时候就已经写过一篇对应的文章：{% post_link React/React中创建递归组件 React中创建递归组件 %}，所以就不在这里进行赘述了，在项目中导航栏往往会以递归组件的形式来进行编写。
5. 解锁JS完整体
在Vue中，如果你使用了模板语法，会受限于Vue的版本，而无法在模板语法中使用JS的一些新语法，比如在Vue2中无法使用?.这个非常有用的语法，但是在JSX中，只要你的babel够新，那么JSX就支持所有的JavaScript语法，比如下面这种语法：
我要大力推荐?.它的中文名字叫做可选链操作符，ES11中，它被正式的纳入了规范，我们先来看下面的代码：
const data = {
name: "张三",
age: 18,
sex: "男"
};
console.log(data.friend.name); // 报错：Uncaught TypeError: Cannot read property 'name' of undefined
所以这个时候我们平时就要做很多判断。
const data = {
name: "张三",
age: 18,
sex: "男"
};
console.log(data && data.friend && data.friend.name); // undefined
而有了可选链操作符（?.）后，我们可以直接简写成：
const data = {
name: "张三",
age: 18,
sex: "男"
};
console.log(data?.friend?.name);
可以发现，代码简化了非常多。
你可能会想，这没什么了不起的，其实这个功能非常的有用，尤其是当数据是从后端获取的情况下，因为后端获取的数据，你完全不知道后端会不会返回undefined，如果一旦返回的是undefined，前端在进行调用的时候，Vue可能会出现界面白屏，而React可能会出现界面报错。
我们将上面的代码放在Vue中使用：
<template>
<div>这里是测试：{{ data?.friend?.name }}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
data: {
name: "张三",
age: 18,
sex: "男",
},
};
},
};
</script>
注意！上面的代码在Vue2中会报语法错误：
而在Vue3中可以正常的解析：
这里额外提一句，Vue3最好还是使用新语法，因为Composition API类似于React的Hooks，体验非常好！
<template>
<div>这里是测试：{{ data?.name }}</div>
</template>
<script>
import { reactive } from "vue";
export default {
name: "App",
setup() {
const data = reactive({ name: "张三", age: 18, sex: "男" });
return {
data,
};
},
};
</script>
我们将上面的代码放在React中使用：
const data = { name: "张三", age: 18, sex: "男" };
export default function App() {
return <div>这里是测试：{data?.friend?.name}</div>;
}
6. 完美搭配TS
在Vue中，因为有模板语法的存在，所以Vue对于TypeScript的支持是一个比较大的问题，比如声明在data中的属性，你就无法很好的给他类型，虽然官方为了解决这个问题，推出了vue-class-component然后又有人在其上进行了一次封装发布了vue-property-decorator，但依然无法完美解决TypeScript和Vue不搭配的问题。
而JSX可以完美结合TypeScript成为TSX，TSX拥有了更多方便维护的特性，比如泛型组件，可以参考这篇文章：{% post_link React/TS与React的完美融合：泛型组件 TS与React的完美融合：泛型组件 %}。
而在React中，这些问题都不复存在，React中的JSX可以完美的配合TypeScript，获得TypeScript的所有能力。
还是那个可选链的问题，我们来看看JSX和TSX中的区别。
JSX中有提示但不报错：
TSX中有语法提示并且有错误信息：
7. 最后
当然，React还提供了一些高级用法，虽然在平时的业务代码中可能并不会用到，但是一旦你要进行创建组件，可能会经常用到，因为我个人写组件的情况非常少，但是在Antd的源码中，大量的使用到了这些高级语法来进行创建组件，在之后我可能会深入去了解这些用法。
一旦你用熟JSX后，你就会发现JSX书写起来实在是太美妙了，仿佛再复杂的组件创建起来你也会很有信息，所以无论你是否使用React，JSX都推荐学习，而且现在TypeScript已经内置了JSX解析。
而且就算你使用Vue，你也可以通过对应的bable使用在Vue中使用JSX语法来创建比较复杂的组件。
