JSX/TSX 基本介绍
JSX和TSX是一种基于JavaScript的语法扩展，用于在React和Vue.js等框架中编写可复用的UI组件和控制逻辑。JSX/TSX可以帮助开发者更加直观和高效地编写UI组件和交互逻辑，同时也可以提高代码的可读性和可维护性。
其中，JSX是React的一种扩展语法，用于构建UI组件和控制逻辑。TSX是TypeScript与JSX结合使用后，用于构建可复用UI组件和控制逻辑的一种语法扩展。TSX在VSCode等IDE中有很好的支持，可以带来更好的代码补全和类型检查。
在实际开发中，使用JSX/TSX可以帮助我们更快速地编写UI组件和逻辑控制代码，同时可以使代码更加易于理解和调试。
举例理解
以下是一些使用JSX/TSX构建UI组件和逻辑控制的例子：
- React开发中的JSX：使用类似于HTML的语法，构建UI组件和渲染逻辑。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
- Vue.js中使用JSX：使用类似于HTML的语法，在Vue组件中构建UI界面并实现逻辑控制。
import Vue from 'vue';
export default Vue.extend({
render() {
return (
<div>
<h1>Hello, {this.$props.name}!</h1>
<p>This is a JSX component in Vue.js.</p>
</div>
)
},
props: {
name: String,
}
});
- 在Vue.js中使用TSX：使用类似于HTML的语法，并结合TypeScript构建可复用的UI组件和逻辑控制。
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
render() {
return (
<div>
<p>{this.msg}</p>
</div>
);
}
}
JS 和 JSX 、TS 和 TSX 的区别
JS 和 JSX
在文件后缀中
.js 表示这是一个 JavaScript 文件
.jsx 表示这是一个 JavaScript XML 文件
JavaScript 是一种直译式脚本语言，大家应该都很熟悉
JavaScript XML 是React组件内部构建标签的类XML语法。可以理解为React提供的语法糖，可以让编译器更方便快速的选择编译方式。
JavaScript 是能够被浏览器直接识别的，JavaScript XML需要经过编译器（webpack等）转换成 JavaScript
但在正常使用上，两者没有什么区别， .js 的语法和 .jsx 的后缀可以互换，语法上也完全兼容
Facebook的团队建议（也就是React的创造者），统一使用 .js 即可，无需特意区分。
TS 和 TSX
.ts 表示这是一个 TypeScript 文件
.tsx 表示这是一个 TypeScript 文件，但它同时还包含了 JavaScript XML（JSX）
我们从使用的角度上来说
.ts 的文件，内容上不支持 <div> 这种HTML语法，会报错的，而且VS Code这类代码编辑器也不会提供相关代码提示和补全的功能。
反之 .tsx 的文件，在遵循TypeScript的基础上，支持 JSX 语法。
所以我们在使用时
辅助的函数文件使用 .ts 即可
React组件方面，还是必须使用.tsx
借鉴学习：
链接：JS 和 JSX 、TS 和 TSX 的区别
