不用导入 React 就可以使用 JSX

Posted 2023-02-21

【中文标题】不用导入 React 就可以使用 JSX

【英文标题】：JSX can be used without importing React

【发布时间】：2021-02-08 22:35:12

【问题描述】：

我正在尝试使用版本 4.0.0 的 create-react-app 运行我的第一个 React JSX 文件，它可以工作！但是，我的 JSX 中没有包含 React 的导入语句，它也可以工作，但是很奇怪。该项目由 create-react-app 命令创建，版本为 4.0.0。

App.js 文件：

/* 没有 import React 但也可以！ */

 import  Component  from "react";
class App extends Component 
  render() 
    return <div>456</div>;
  

export default App;

【问题讨论】：

你在问问题吗？

您一定很喜欢新的 JSX 转换：reactjs.org/blog/2020/09/22/…。你有问题吗？

是的，这是 CRA 4/React 17 的新功能之一。请参阅 github.com/facebook/create-react-app/blob/master/…

【参考方案1】：

import React from 'react';

function App() 
  return <h1>Hello World</h1>;

之前的 react jsx 用于使用 React.createElement() 转换元素。没有自动插入：

import React from 'react';

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

现在，jsx 是 transpiled by a compiler automatically。

// Inserted by a compiler
import jsx as _jsx from 'react/jsx-runtime';

function App() 
  return _jsx('h1',  children: 'Hello world' );

因此，我们不需要导入React 组件，除非我们需要显式使用React。例如。

import React from 'react' // without it, compiler will fail
class Foo extends React.Component 
 render() 
   return <h1>hello</h1>
 

【参考方案2】：

从 React 17 开始，无需导入 React 即可使用 JSX。请参阅名为 Removing Unused React Imports 的部分的博客文章：

因为新的 JSX 转换会自动导入必要的 react/jsx-runtime 函数，所以当你使用 JSX 时，React 将不再需要在作用域内。这可能会导致代码中出现未使用的 React 导入。

什么是 JSX 转换？

浏览器无法直接理解 JSX，因此大多数 React 用户依赖 Babel 或 TypeScript 之类的编译器将 JSX 代码转换为常规 javascript。

建议阅读是Introducing the New JSX Transform。你也可以看到Using React 17 and the new JSX transform with Create React App 4.0 Alpha。

【参考方案3】：

这是JSX transform 与React 17 一起引入的新功能：

随着 React 17 的发布，我们想要制作一些 对 JSX 转换的改进，但我们不想破坏 现有的设置。这就是为什么我们与 Babel 合作提供一个新的、 JSX 转换的重写版本 升级。

升级到新的转换是完全可选的，但它有一个 一些好处：

使用新的转换，您可以在不导入 React 的情况下使用 JSX。 根据您的设置，其编译后的输出可能会略微提高包大小。 它将实现未来的改进，减少您学习 React 所需的概念数量。