当你编写 react 时，你会经常看到 jsx——一种在 javascript 代码中看起来像 html 的语法。但你有没有想过这段代码在浏览器中是如何运行的？
神奇之处在于：jsx 不是有效的 javascript！浏览器无法直接理解它。在幕后，像 babel 这样的工具介入将 jsx 转换（或“转译”）为常规 javascript。
流程：
1.你编写 jsx – 它看起来像 html，但存在于你的 react 组件中。例如：
const element =hello, world!
;
2.babel 对其进行转换 – 在构建过程中，babel 使用 react.createelement:
将 jsx 转换为纯 javascript
const element = react.createelement('h1', null, 'hello, world!');
3.浏览器中的 javascript – 最后，这个标准 javascript 是浏览器执行的，动态构建 dom。
快转字幕
新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。
357 查看详情
巴别塔是如何工作的？
babel 是一个强大的 javascript 编译器，使您能够使用最新的 javascript 功能（包括 react 中的 jsx），同时确保不同浏览器和环境之间的兼容性。以下是 babel 工作原理的详细说明：
1.解析
babel 首先将现代 javascript 或 jsx 代码解析为抽象语法树 (ast)。 ast 是一种详细的树状结构，以 babel（和其他工具）易于使用的方式表示代码来分析和操纵。在此步骤中，babel 读取了代码，但尚未更改它。
例如，babel 采用以下 jsx 代码：
const element =hello, world!
;
并生成一个ast，代表这段代码的结构。
2.转变
接下来，babel 将一系列插件应用到ast。每个插件负责根据它定义的规则转换ast的特定部分。这些转换可以包括将现代 javascript 语法（如箭头函数或 async/await）转换为旧的、浏览器兼容的版本。
对于 jsx，babel 进行转换：
const element =hello, world!
;
const element = React.createElement('h1', null, 'Hello, World!');
3。 代码生成
完成所有转换后，babel 从转换后的 ast 生成 javascript 代码。这是生成人类可读输出的最后一步，浏览器或 node.js 可以执行该输出。
让我们得出结论…
立即学习“Java免费学习笔记（深入）”；
为什么它很重要：
jsx 允许您编写更直观、基于组件的 ui 代码，但 babel 和 javascript 运行时让它变得栩栩如生。了解这种转换可以帮助您更好地排除故障并编写更优化的 react 应用程序。
以上就是React JSX 如何在幕后转换为 JavaScript的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/451671.html
微信扫一扫 
支付宝扫一扫 
