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 可以执行该输出。
让我们得出结论...
为什么它很重要:
jsx 允许您编写更直观、基于组件的 ui 代码,但 babel 和 javascript 运行时让它变得栩栩如生。了解这种转换可以帮助您更好地排除故障并编写更优化的 react 应用程序。
以上就是React JSX 如何在幕后转换为 JavaScript的详细内容,更多请关注其它相关文章!