JSX如何被浏览器识别执行？

引用

• 【React官网】介绍全新的JSX转换

何为JSX转换？

在浏览器中无法直接使用 JSX，所以大多数 React 开发者需依靠 Babel 或 TypeScript 来将 JSX 代码转换为 JavaScript。许多包含预配置的工具，例如 Create React App 或 Next.js，在其内部也引入了 JSX 转换。

React17之前

当你使用 JSX 时，编译器会将其转换为浏览器可以理解的 React 函数调用。旧的 JSX 转换会把 JSX 转换为 React.createElement(...) 调用。

例如，假设源代码如下：

import React from 'react';

function App() {

  return <h1>Hello World</h1>;

}

旧的 JSX 转换会将上述代码变成普通的 JavaScript 代码：

import React from 'react';

function App() {

  return React.createElement('h1', null, 'Hello world');

}

React17之后

从React 17开始，React与Babel合作，引入了一种新的JSX转换功能，称为"Runtime Automatic"（自动运行时）。

因为React17存在如下问题，并不完美：

• 如果使用 JSX，则需在 React 的环境下，因为 JSX 将被编译成 React.createElement。
• 有一些 React.createElement 无法做到的性能优化和简化。

为了解决这些问题，React 17 在 React 的 package 中引入了两个新入口，这些入口只会被 Babel 和 TypeScript 等编译器使用。新的 JSX 转换不会将 JSX 转换为 React.createElement，而是自动从 React 的 package 中引入新的入口函数并调用。

假设你的源代码如下：

function App() {

  return <h1>Hello World</h1>;

}

下方是新 JSX 被转换编译后的结果：

// 由编译器引入（禁止自己引入！）

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {

  return _jsx('h1', { children: 'Hello world' });

}