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