Question

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

import React, { PropTypes } from 'react';

function MyComponent({ foo, bar }) {
  ...
  return ...;
}

MyComponent.propTypes = { 
  foo: PropTypes.string.isRequired,
  bar: PropTypes.func.isRequired
}

export default MyComponent;

我认为没有必要将React导入到功能组件中，并且一直认为它只是组件为类并且不再需要时的痕迹。

我也很惊讶我的linter并没有抱怨未使用的导入（当我导入一些未使用的东西时，它通常会抱怨）。

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

Answer 1

是的，有。 Babel将JSX转换为使用 React：

<div></div>

要：

React.createElement("div", null);

因此，您的JSX在内部被转换为在纯JavaScript中使用React.createElement，使用React。请记住，JSX只是纯JavaScript的语法糖。如果您没有专门导入它，它将报告React未定义。

Answer 2

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

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

1。构造函数

2。生命周期方法

3。渲染

并将此渲染部分反应转换为：

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

现在当你编写一个无状态功能组件时，它基本上只有render部分没有构造函数，没有生命周期方法。无论此组件中的return是什么，也会转换为：

React.createElement(element, null);

这就是为什么需要导入React的原因。请始终牢记我们编写JSX而不是HTML ，这将由babel转换。

检查DOC for React without JSX。

按Babel检查功能组件的converted version。

希望这会对你有所帮助。

Answer 3

到目前为止，您无需import React from 'react'; 用于功能组件。为何您需要它，答案已得到很好的解释。

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

Answer 4

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

Find this article here

Answer 5

在ES6中，我们使用箭头函数并将这些函数称为无状态组件。如果您使用create react-app构建应用程序，则无需将响应导入到功能/无状态组件中。

示例：这是square.js文件

const square = (number) => {
    return number*number;    
}
export default square;

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

5 个答案: