我需要为无状态功能组件导入 React 吗?

IT技术 javascript reactjs ecmascript-6
2021-04-11 19:19:31

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

import React from 'react';

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

export default MyComponent;

我想知道为什么我们需要在实际没有使用 React 时(以任何明确的方式)导入它。

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

是否有理由导入React我不知道的功能组件?

4个回答

就在这里。Babel 转译 JSX 以使用 React

<div></div>

到:

React.createElement("div", null);

所以你的 JSX 在内部被转译为React.createElement在纯 JavaScript使用,它确实使用React. 请记住,JSX 只是纯 JavaScript 的语法糖。如果您不专门导入它,它将报告React未定义。

20219 月更新:在 React 17 中,引入了一个新的 JSX 转换,它可以在不使用React.createElement. 这允许我们在不导入 React 的情况下使用 JSX。更多关于文档

到目前为止,您不需要import React from 'react'; 为功能组件。为什么你需要它在接受的答案中有很好的解释。

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

经验为我证实了这一点。有趣的是,尽管不是最新的、被接受的或最高的,但这个答案是搜索的特色片段:“你需要为功能组件导入反应吗”。
2021-06-10 19:19:31
实际上 Babel 会在需要时自动导入“react”(或其他支持新 API 的库),因此您不必再手动包含它。但是内部的概念仍然相同——React 将在混乱的代码中。
2021-06-15 19:19:31
好消息!很高兴知道!
2021-06-17 19:19:31

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转译

检查没有 JSX 的 ReactDOC

通过 Babel检查功能组件转换版本

希望这会帮助你。

@Prakashsharma 因为我们写的是 jsx 而不是 html,请检查:编写一个功能组件并检查转换后的输出:babeljs.io/repl/...
2021-05-23 19:19:31
“无论你从这个组件返回什么,也会被转换成:React.createElement(element, null)”。它如何转换为 createElement?
2021-05-26 19:19:31
所以 babel 正在转译它。你居然解决了我的多重疑惑。谢谢。:D
2021-06-03 19:19:31
很高兴,它帮助了你:)
2021-06-10 19:19:31

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

在这里找到这篇文章

感谢您的回答,但它或多或少是@foolish回答的重复
2021-06-14 19:19:31