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

html5 • • 问答

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

import React from 'react'

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

回答

这是 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 以使用 Hooks 或 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 -52升

以上是React不再需要APP.js中的import语句了吗？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>