我需要为无状态功能组件导入 React 吗？答案

【问题标题】：Do I need to import React for stateless functional components?我需要为无状态功能组件导入 React 吗？
【发布时间】：2017-10-23 18:32:39
【问题描述】：

在我周围（例如博客文章、代码）我看到了 React 无状态功能组件的代码，其中导入了 React，即使它从未使用过。

import React from 'react';

function MyComponent() {
  return <div>Howdy!</div>;
}

export default MyComponent;

我想知道为什么我们需要在没有实际使用时（以任何显式方式）导入 React。

我也很惊讶我的 linter 没有抱怨未使用的导入。

是否有某些理由将React 导入我不知道的功能组件中？

【问题讨论】：

你真的尝试过编译它吗？我的意思是，理智的争论固然很好，但只要尝试一下就可以回答这个问题。
ESLint React 插件 eslint-plugin-react 公开了规则 react/react-in-jsx-scope 以确保您在使用 JSX 时在范围内有 React，因为编译后的代码引用了React。该规则的描述也回答了你的问题。 react/jsx-uses-react 规则防止 React 被标记为未使用。
@DaveNewton：在我的系统上运行良好。这就是为什么我很困惑...
没有导入？我不明白怎么做。
@DaveNewton：我猜 Babel 在后台处理它

【解决方案1】：

是的，有。 Babel 将 JSX 转译为使用 React:

<div></div>

收件人：

React.createElement("div", null);

因此，您的 JSX 在内部被转译为在纯 JavaScript 中使用 React.createElement，而确实使用 React。请记住，JSX 只是纯 JavaScript 的语法糖。如果不专门导入，会报React没有定义。

2021 年 9 月更新：在 React 17 中，引入了一个新的 JSX 转换，它可以自动转换 JSX，而不使用 React.createElement。这允许我们在不导入 React 的情况下使用 JSX。更多关于docs

【讨论】：

【解决方案2】：

React 无状态功能组件到底是什么？

当你编写一个有状态的组件时，它具有以下三个基本部分（除了所有逻辑）：

1.构造函数

2.生命周期方法

3. 渲染

并 react 将此渲染部分转换为：

React.createElement(element, null); //element will be the wrapper of all the jsx

现在，当您编写无状态功能组件时，它基本上只有render 部分没有构造函数，没有生命周期方法。无论你在这个组件中的return 都将被转换成：

React.createElement(element, null);

这就是为什么需要导入React。请始终记住，我们编写 JSX 而不是 html，这将被 babel 转译。

通过 Babel 检查一个功能组件的converted version。

希望这会对你有所帮助。

【讨论】：

“无论你从这个组件返回什么，都会被转换成：React.createElement(element, null)”。它是如何转换为 createElement 的？
@Prakashsharma 因为我们写的是 jsx 而不是 html，检查一下：写一个功能组件并检查转换后的输出：babeljs.io/repl/…
所以 babel 正在编译它。您实际上解决了我的多个疑问。谢谢。 :D
很高兴，它帮助了你:)

【解决方案3】：

现在你不需要import React from 'react'; 用于功能组件。为什么需要它在接受的答案中得到了很好的解释。

这篇官方博文https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html 解释了为什么需要它，现在在版本 17 之后不再需要它。

【讨论】：

好消息！很高兴知道！
其实 Babel 会在需要的时候自动导入“react”（或者其他支持新 API 的库），这样你就不用再手动引入了。但是里面的概念还是一样的——React 将在 traspiled 代码的范围内。
经验为我证实了这一点。有趣的是，尽管不是最新的、接受的或最高投票的，但这个答案是搜索的特色 sn-p：“你需要为功能组件导入反应吗”。

【解决方案4】：

不，你不需要，React 17 会在开箱即用 JSX Transform 的帮助下自动完成。

【讨论】：