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