我正在尝试使用版本为 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;从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 和新的 JSX 转换与 Create React App 4.0 Alpha。
这是JSX 转换的新功能React 17：
随着 React 17 版本的发布，我们希望对 JSX 转换进行一些改进，但我们不想破坏现有设置。这就是我们与 Babel 合作为想要升级的人提供新的、重写的 JSX 转换版本的原因。
升级到新的转换是完全可选的，但它有一些好处：
- 使用新的转换，您可以在不导入 React 的情况下使用 JSX。
- 根据您的设置，其编译输出可能会稍微改善包大小。
- 它将支持未来的改进，减少你学习 React 所需的概念数量。
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由编译器自动转译。
// 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>
}
}