什么归类为React功能组件? [英] What classifies as a React functional component?

问题描述

我正在关注有关Udemy的教程，其中讲师试图解释HOC.

I am following a tutorial on Udemy where the instructor is trying to explain HOC.

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

To explain HOC, he created a function having a functional component (at least this is what he said). This is the code:

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

   )
 }

React文档显示以下示例:

The React documentation displays this example:

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

并提到:

此函数是有效的React组件，因为它接受带有数据的单个"props"(代表属性)对象参数并返回React元素.我们称这类组件为功能性"，因为它们实际上是JavaScript函数.

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中的功能组件吗?

In simpler words, is it safe to say that: Any function which takes props as an argument can be classified as a functional component? If not, can someone explain in a nutshell about functional components in React?

推荐答案

任何以props作为参数的函数都可以归类为功能组件?

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

否，props只是函数参数，就像所有其他常规函数参数一样.因此，如果我们定义任何接受参数的函数，则它不一定是React功能组件，就像这样，不是React组件:

No, props is just the function argument, like all other normal function arguments. So if we define any function that accepts an argument it will not necessarily be a React functional component, like this is not a React component:

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

重要的部分是如果该组件返回React元素" ，则只有它才是React功能组件.

The important part is "If that component returns a React element", only then will it be a React functional component.

为更清楚起见，只需在单独的文件中定义以下函数；进行转换时，它会不会抛出任何错误:

To make it more clear just define the below function in a separate file; it will not throw any error when you transpile:

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

但是，如果您在一个单独的文件中定义以下组件而不导入React，则会抛出错误，当您进行转换时未定义React:

But if you define this below component in a separate file without importing React, it will throw error, React is not defined, when you transpile:

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

因为 JSX 将转换为 React.createElement(....)和React将是必需的.

Because JSX will get converted into React.createElement(....) and React will be required. The converted version of the above component will be:

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

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

I will suggest, use Babel REPL and define both the functions and check the output.

这篇关于什么归类为React功能组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！