React JSX 如何在幕后转换为 JavaScript

当你编写 react 时，你会经常看到 jsx——一种在 javascript 代码中看起来像 html 的语法。但你有没有想过这段代码在浏览器中是如何运行的？

神奇之处在于：jsx 不是有效的 javascript！浏览器无法直接理解它。在幕后，像 babel 这样的工具介入将 jsx 转换（或“转译”）为常规 javascript。

流程：

1.你编写 jsx – 它看起来像 html，但存在于你的 react 组件中。例如：

const element = <h1>hello, world!</h1>;

2.babel 对其进行转换 – 在构建过程中，babel 使用 react.createelement:
将 jsx 转换为纯 javascript

const element = react.createelement('h1', null, 'hello, world!');

3.浏览器中的 javascript – 最后，这个标准 javascript 是浏览器执行的，动态构建 dom。

巴别塔是如何工作的？

babel 是一个强大的 javascript 编译器，使您能够使用最新的 javascript 功能（包括 react 中的 jsx），同时确保不同浏览器和环境之间的兼容性。以下是 babel 工作原理的详细说明：
1.解析
babel 首先将现代 javascript 或 jsx 代码解析为抽象语法树 (ast)。 ast 是一种详细的树状结构，以 babel（和其他工具）易于使用的方式表示代码来分析和操纵。在此步骤中，babel 读取了代码，但尚未更改它。
例如，babel 采用以下 jsx 代码：

const element = <h1>hello, world!</h1>;

并生成一个ast，代表这段代码的结构。
2.转变
接下来，babel 将一系列插件应用到ast。每个插件负责根据它定义的规则转换ast的特定部分。这些转换可以包括将现代 javascript 语法（如箭头函数或 async/await）转换为旧的、浏览器兼容的版本。
对于 jsx，babel 进行转换：

const element = <h1>hello, world!</h1>;

const element = React.createElement('h1', null, 'Hello, World!');

3。 代码生成
完成所有转换后，babel 从转换后的 ast 生成 javascript 代码。这是生成人类可读输出的最后一步，浏览器或 node.js 可以执行该输出。

让我们得出结论...

立即学习“Java免费学习笔记（深入）”；

为什么它很重要：

jsx 允许您编写更直观、基于组件的 ui 代码，但 babel 和 javascript 运行时让它变得栩栩如生。了解这种转换可以帮助您更好地排除故障并编写更优化的 react 应用程序。