JSX转译

我们知道JSX最终都会被编译为React.createElement(component, props, ...children)这种形式的代码，所以React（React 17之前）必须要在自定义组件中进行引入，比如下面的代码：

// 需要引入 React
import React from 'react';

function Test() {
  return <div />;
}

而在React 18中，我们就不需要再显示的引入react了，因为React 18中的JSX会被编译为jsx(component, props, ...children)这种形式的代码，而jsx是一个全局的方法，我们可以在任何地方进行调用。

要知道转译过程，我们就需要对Babel有一定的了解，因为Babel是一个JS编译器，它可以将JSX转译为JS。

在现代化的项目中，我们一般都会使用@babel/preset-react这个插件来进行JSX的转译，我们可以在Babel的官网上找到这个插件的文档，我们可以看到这个插件的配置如下：

{
  "presets": ["@babel/preset-react"]
}

Babel是专门用来编译JS的，而我们使用ts语法编写的React项目，我们需要使用@babel/preset-typescript这个插件来编译ts，所以我们需要同时使用这两个插件，我们可以在Babel的官网上找到这个插件的文档，我们可以看到这个插件的配置如下：

{
  "presets": ["@babel/preset-typescript", "@babel/preset-react"]
}

然后在最近的TypesScript编译器中，它可以不通过Babel来编译JSX，而是直接使用jsx这个配置来编译JSX，我们可以在TypeScript的官网上找到这个配置的文档。

{
  "compilerOptions": {
    "jsx": "jsx"
  }
}

同时我们可以使用jsxFactory来指定JSX的转译函数，我们可以在TypeScript的官网上找到这个配置的文档，我们可以看到这个配置的默认值是React.createElement，所以我们可以不用配置这个值，但是我们也可以将这个值改为jsx，这样我们就可以在任何地方使用JSX了。

{
  "compilerOptions": {
    "jsxFactory": "jsx"
  }
}

到这里，我们简单的对JSX的转译有了一个大概的了解，其实浏览器是不支持JSX的，而通过Babel的转译，将JSX转译为JS，浏览器就可以正常的运行了。

我们可以使用Babel REPL来查看，我们可以在这个网站上输入JSX代码，然后点击Run按钮，就可以看到转译后的JS代码了。

关于Babel和TypeScript的相关文章，可以看这两个对应的板块：