JSX/TSX的知识介绍

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组件和逻辑控制的例子：

1. React开发中的JSX：使用类似于HTML的语法，构建UI组件和渲染逻辑。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9

2. 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,
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 在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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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 的区别