Javascript 我是否需要为无状态功能组件导入React？

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

React

，即使从未使用过

import React from 'react';

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

export default MyComponent;

从“React”导入React；
函数MyComponent（）{
你好！；
}
导出默认MyComponent；

我想知道为什么我们需要导入React，而实际上它并没有被使用（以任何明确的方式）

我也很惊讶，我的皮棉没有抱怨未使用的进口

---

是否有理由将

React

导入到我不知道的功能组件中？

是的，有。Babel transpiles JSX使用

React

：

<div></div>

因此，您的JSX在内部被传输到纯JavaScript中使用

React.createElement

，而纯JavaScript使用

React

。记住，JSX只是纯JavaScript的语法糖分。如果您没有专门导入它，它将报告未定义

React

React无状态功能组件究竟是什么

编写有状态组件时，它包含以下三个基本部分（除所有逻辑外）：

1.

2.生命周期方法

3.渲染

并将此渲染部分转换为：

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

现在，当您编写一个无状态功能组件时，它基本上只有一个

呈现
部分没有构造函数，没有生命周期方法。从该组件返回的
值也将转换为：

React.createElement(element, null);

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

检查一下

通过Babel检查功能部件的性能

希望这将对您有所帮助。
现在您不需要从“React”导入React
用于功能组件。你为什么需要它在公认的答案中得到了很好的解释

这篇官方博客文章
解释为什么需要它，现在在版本17之后不再需要它。
不，您不需要反应17在开箱即用JSX Transform的帮助下自动执行

您是否确实尝试过将其传输？我的意思是，理智的争论是很好的，但简单地尝试一下就可以回答问题。ESLint React插件ESLint plugin React公开了规则，以确保在使用JSX时，您的
React
范围内，因为编译的代码引用了
React
。该规则的描述也回答了您的问题。该规则防止
React
被标记为未使用。@DaveNewton:在我的系统上运行良好。这就是为什么我感到困惑…没有进口？我不知道该怎么做。@DaveNewton:我猜Babel会暗中处理它“从这个组件返回的任何东西也会被转换成：React.createElement（element，null）”。它是如何转换为createElement的？@Prakashsharma因为我们写的是jsx而不是html，请检查以下内容：编写一个函数组件并检查转换后的输出：因此babel正在转换它。你真的解决了我的多重疑问。谢谢先生，这对你有帮助：）好消息！很高兴知道！实际上，Babel会在需要时自动导入“react”（或其他支持新API的库），因此您不再需要手动包含它。但内部的概念仍然是一样的-React将在traspiled代码中的范围内。经验对我来说证实了这一点。有趣的是，尽管不是最新的、被接受的或投票率最高的，但这个答案是搜索的特色片段：“您需要为功能组件导入react吗”。感谢您的回答，但它或多或少是@Duol的重复
React.createElement(element, null);