javascript - 什么归类为 React 功能组件？

Question

我正在学习 Udemy 上的教程，其中讲师正在尝试解释 HOC。

为了解释 HOC，他创建了一个具有功能组件的函数(至少他是这么说的)。这是代码:

const withClass = (WrappedComponent, className) => {
     return (props) => (
         <div className={className}>
             <WrappedComponent {...props} />        
     </div>

   )
 }

React 文档显示了这个例子:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

并提到:

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “functional” because they are literally JavaScript functions.

[问题]

简而言之，可以安全地说:任何将 props 作为参数的函数都可以归类为函数式组件吗？如果没有，有人可以简要解释一下 React 中的功能组件吗？

Answer 1

Any function which takes props as an argument can be classified as a functional component?

不，props 只是函数参数，就像所有其他普通函数参数一样。因此，如果我们定义任何接受参数的函数，它不一定是 React 函数式组件，就像这不是 React 组件:

const Testing = props => {
   const a = 10;
   return a * props.a;
}

重要的部分是“如果该组件返回一个 React 元素”，只有这样它才会是一个 React 功能组件。

为了更清楚，只需在单独的文件中定义以下函数；当您转译时它不会抛出任何错误:

const Test = props => props.key * 10;

但是如果你在一个单独的文件中定义这个下面的组件而不导入 React，它会抛出错误，React is not defined，当你转译时:

const Test = props => <div>{props.key * 10}</div>;

因为 JSX 将被转换为 React.createElement(....) 并且 React 将是必需的。 converted version上述组件将是:

var Test = function Test(props) {
  return React.createElement(
    "div",
    null,
    props.key * 10
  );
};

我建议使用 Babel REPL并定义这两个函数并检查输出。