JSX、TSX 整体理解

可以少去理解一些不必要的概念，而多去思考为什么会有这样的东西，它解决了什么问题，或者它的运行机制是什么？

JS

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

https://www.runoob.com/js/js-intro.html

JSX

1. 什么是 JSX

下面我们看一段代码：

class HelloMessage extends React.Component {

  render() {

    return <div>Hello {this.props.name}</div>;

  }

}

JSX 是一种 JavaScript 的语法扩展，运用于 React 架构中，可以让你在 JavaScript 文件中书写类似 HTML 的标签。再通过翻译器转换到纯 JavaScript 后由浏览器执行，在实际开发中，JSX 在产品打包阶段都已经编译成纯 Javascript，不会带来任何副作用，反而会让代码更加直观并易于维护。

JSX 允许你在 JavaScript 中编写类似 HTML 的标签，从而使渲染的逻辑和内容可以写在一起。有时候，你可能想要在标签中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下，你可以在 JSX 的大括号内来编写 JavaScript。

元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面。

可以通过以下两个方面了解 JSX：

扩展混合：JSX 是一种 JS 扩展的表达式，混合使用 Javascript 和类 html 来编写代码。
混合支持：支持样式、逻辑表达式和事件的统一混合实现。

2. JSX 编译之 Babel 编译器

JSX 编译过程由 Babel 编译器实现。所谓的 JSX 其实就是 Javascript 对象加 XML，所以使用 React 和 JSX 的时候一定要经过编译的过程：Bable 将 JSX 编译成 JavaScript 对象，然后通过 ReactDom.render() 构造 DOM 元素保持随时页面更新。

// JSX 代码

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<div>Babel 编译器</div>);

// JSX 编译后

const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(React.createElement("div",{id: "babel", className: "babel"}, "Babel 编译器1"))

3. 为什么使用 JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑分离到不同文件这种人为的分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。我们将在后面章节中深入学习组件。如果你还没有适应在 JS 中使用标记语言，这个会议讨论应该可以说服你。

React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

4. JSX 官方文档

官网：https://zh-hans.react.dev/learn/writing-markup-with-jsx

TypeScript

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 特点：

1）TypeScript 的定位是静态类型语言，在写代码（编译）阶段就能检查错误，而非运行阶段（动态语言边解析边执行）。

2）类型系统是最好的文档，增加了代码的可读性和可维护性。

3）强类型、类型推断。

4）有一定的学习成本，需要理解接口 (Interfaces)、泛型 (Generics)、类 (Classes)等。

5）接口：接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。即接口也是一种规范，用来描述、约束对象、函数、类的形状的，即规范类等里面必须实现哪些方法。

6）TS 最后也是编译为 JS，运行在任何浏览器上。

语法学习：

https://www.runoob.com/typescript/ts-tutorial.html

TSX

TSX 表明是 Typescript 文件并使用了 JSX 语法，JSX 语法参考上面提到的 JSX 详解。最后提供一个别人写的文章帮助理解。

https://zhuanlan.zhihu.com/p/435385184