React JSX是什么？

ShidongKe
275 阅读4分钟

1. JSX是什么

React JSX（JavaScript XML）是一种用于编写React组件的语法扩展，它的作用是将组件的结构和呈现逻辑以一种类似于HTML的方式组织起来，并在JavaScript中进行描述。

我们可以以类似HTML的形式，编写组件的UI部分，使其更容易理解和维护。

function MyComponent() {
    return (
        <div>
            <h1>Hello, React!</h1>
            <p>This is a React component.</p>
        </div>
    );
}

2. 如何配置

JSX本身并不是标准的JavaScript语法，因此在将React应用程序执行之前，通常需要使用Babel等工具将JSX编译为纯JavaScript代码。

要将JSX转换为纯JavaScript，您需要配置Babel以使用相应的插件和预设。通常，以下步骤描述了如何配置Babel以将JSX转换为JS：

  1. 安装 Babel 相关的包：首先，您需要安装一些与Babel相关的npm包，包括@babel/core、@babel/preset-react（用于处理React的JSX语法）、@babel/preset-env（用于处理ES6+语法），以及任何其他您可能需要的插件。
npm install --save-dev @babel/core @babel/preset-react @babel/preset-env
  1. 创建.babelrc文件：您可以在项目的根目录下创建一个名为.babelrc的配置文件，以指定Babel的配置选项。如果您使用Babel 7或更高版本，也可以将配置放在babel.config.js文件中。
{ "presets": ["@babel/preset-react", "@babel/preset-env"] }

这个配置告诉Babel使用@babel/preset-react和@babel/preset-env来处理React JSX和ES6+语法。

  1. 配置构建工具：具体的配置步骤可能取决于您使用的构建工具。以下是一些常见的构建工具配置示例：

    • Webpack：如果您使用Webpack作为构建工具，通常需要在Webpack配置中添加Babel的加载器（babel-loader）。
    • Parcel：Parcel通常无需额外的配置，因为它会自动检测.babelrc文件并使用相应的配置。
    • Create React App：如果您使用Create React App创建项目，无需手动配置Babel，它已经为您配置好了。

  2. 转换代码：运行构建工具来构建您的项目，Babel将会转换您的JSX代码为纯JavaScript。具体的命令可能因构建工具而异。

    • 如果使用Webpack，可以运行webpack命令。
    • 如果使用Parcel，可以运行parcel build命令。
    • 如果使用Create React App，可以运行npm start等命令。

一旦完成了这些步骤，您的JSX代码将被转换为纯JavaScript，可以在浏览器中运行。确保您的构建工具已正确配置，并且Babel插件和预设已安装和启用。

JSX原理

由于JSX不是标准的JavaScript语法，因此在将React应用程序执行之前，需要使用Babel等工具将JSX编译为纯JavaScript代码。Babel将JSX转换为React.createElement函数的调用。

Babel将JSX编译成React.createElement代码的过程涉及到使用名为Babel插件（通常是@babel/plugin-transform-react-jsx起主要作用，上文配置中的插件@babel/preset-react的就包含了@babel/plugin-transform-react-jsx。以下是Babel如何将JSX编译成React.createElement代码的基本工作原理：

  1. 解析：首先，Babel会解析您的JavaScript代码，将其转换成抽象语法树（AST）的形式，以便更容易分析和转换代码。

  2. 识别JSX：Babel会检测到您的代码中存在JSX语法的部分。当它遇到JSX标签(尖括号<></>)时，它知道需要将其转换为React.createElement的调用。

    示例的JSX代码：

    <div>
    <h1>Hello, React!</h1>
    <p>This is a React component.</p>
</div>

  3. 转换：一旦Babel识别到JSX，它会将JSX标签转换为React.createElement的调用。这个转换的过程通常使用配置的Babel插件完成.

    转换后的代码

    React.createElement(
    "div",
    null, 
    React.createElement("h1", null, "Hello, React!"),
    React.createElement("p", null, "This is a React component.")
);

大家也可以点击 这里前往babel（try it out）试一试。

  1. 生成代码：最终，Babel将转换后的代码生成为可执行的JavaScript代码。这个生成的JavaScript代码可以在浏览器或Node.js环境中执行，以呈现React组件的UI。

Babel通过解析、识别、转换和生成的一系列步骤，将JSX代码转换为React.createElement调用，以便在React应用程序中构建虚拟DOM树和更新实际DOM。这个过程使得开发人员能够以声明性的方式编写React组件，同时确保它们最终以纯JavaScript的形式运行。

我们已经了解了React JSX的运行原理，它是将XML的格式代码转换为React.createElement调用。那么React.createElement是构建虚拟DOM树的入口，下一章节我们将从这个函数出发，详细谈谈什么是虚拟DOM树。

感谢阅读。

avatar
文章
阅读
粉丝