React不再需要APP.js中的import语句了吗

Question

我最近注意到，在App.js中没有react的导入语句，比如：

import React from 'react'

在所有的教程中，我都看到了这一行。现在是自动的吗？

Answer 1

这是React 17的一个很酷的功能。

点击此处阅读官方React文档：https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

以下是文档中的有用摘要，以防您没有时间阅读全部内容：

新转换有什么不同？

当您使用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');
}

注意

您的源代码不需要以任何方式更改。我们将描述JSX转换如何将您的JSX源代码转换为浏览器能够理解的JavaScript代码。

然而，这并不完美：

• 因为JSX被编译到React.createElement中，所以如果使用JSX，React需要在作用域中
• React.createElement不允许进行一些性能改进和简化

为了解决这些问题，React 17在React包中引入了两个新的入口点，这些入口点只供Babel和TypeScript等编译器使用。新的JSX转换不是将JSX转换为React.createElement，而是自动从React包中的那些新入口点导入特殊函数并调用它们。

假设您的源代码如下所示：

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

这就是新的JSX转换将其编译为的内容：

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}

请注意，我们的原始代码不再需要导入React来使用JSX！(但我们仍然需要进口React才能使用React提供的Hooks或其他出口产品。(

此更改与所有现有的JSX代码完全兼容，因此您不必更改组件。如果你很好奇，你可以查看技术RFC，了解有关新转换如何工作的更多细节。

注意

react/jsx运行时和react/json-dev运行时内的函数只能由编译器转换使用。如果你需要在代码中手动创建元素，你应该继续使用React.createElement。它会继续工作，不会消失。

您可以阅读关于如何在React 17中启用新的JSX转换的博客：https://dev.to/wojtekmaj/how-to-enable-automatic-runtime-in-react-17-with-babel-preset-react-52l