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

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在内部被转换为React.createElement在纯JavaScript 中使用,它确实使用React.请记住,JSX只是纯JavaScript的语法糖.如果您没有专门导入它,它将报告React未定义的内容.

Answer 2

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

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

Answer 3

什么是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 检查功能组件的转换版本.

希望这会帮助你.