JSX、TSX 整体理解-Toy模板网

这篇具有很好参考价值的文章主要介绍了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"))