无需导入 React 即可使用 JSX

Question

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

App.js 文件：

/* 没有导入 React 但也可以工作！*/

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

Answer 1

Starting from React 17 it's not necessary to import React to use JSX. See from the blog post about that in the section called 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 和新的 JSX 转换与 Create React App 4.0 Alpha。

Answer 2

这是JSX 转换的新功能React 17：

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

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

• 使用新的转换，您可以在不导入 React 的情况下使用 JSX。
• 根据您的设置，它的编译输出可能会稍微改善 bundle size。
• 它将实现未来的改进，减少你学习 React 所需的概念数量。