React 不再需要 APP.js 中的 import 语句了吗？ [复制]答案

【问题标题】：Does React not require an import statement in APP.js anymore? [duplicate]React 不再需要 APP.js 中的 import 语句了吗？ [复制]
【发布时间】：2021-04-15 11:09:47
【问题描述】：

我最近注意到 App.js 中没有针对 react 的 import 语句，例如：

import React from 'react'

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

【问题讨论】：

你在使用新的 JSX 转换吗？阅读此stackoverflow.com/a/64541142/12684693 和stackoverflow.com/a/64541142/3825777

标签： javascript reactjs jsx

【解决方案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 才能使用 Hook 或 React 提供的其他导出。）

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

注意

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

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

【讨论】：