常规 JavaScript 函数与 React 函数式组件的区别

Question

但是两者有什么区别呢？

从这篇文章来看，似乎没有什么区别，只是写作方式不同。

请提供示例以更清楚地说明差异。

Answer 1

所有 React Function 组件都是常规的 Javascript 函数。

并非所有常规 Javascript 函数都是 React Function 组件。

Function 组件只是特定 function 的签名。

您可以查看 Typescript 定义以确切了解该签名是什么：

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

参考： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L542

PropsWithChildren定义为：

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

参考： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L822

JSX 解析器将翻译 JSX 并将某些参数传递给这些函数。

JSX：

<CompOne someProperty="someValue"><CompTwo/></CompOne>

相当于：

CompOne({someProperty: "someValue", children: CompTwo({})})

签名只是让你知道 JSX 将如何被解析，所以你知道如何在你的 function 中访问这些参数。

签名还包括一些额外的信息： function 应该返回一个ReactElement或null ，它可以有这四个属性。

---

例如，我正在尝试从CompOne记录someProperty值：

<CompOne someProperty="someValue" someOtherProp="someOtherValue" />

CompOne(someProperty) {
  console.log(someProperty); // logs {someProperty: "someValue", someOtherProp: "someOtherValue"}
  return null;
}

这是不正确的，因为我没有像 Function 组件签名描述的那样使用 function。 JSX 解析器将属性读入 object，并将其作为第一个参数传递给 function。虽然代码仍会执行，但这不是我想要发生的。

CompOne(props) {
  console.log(props.someProperty); // logs "someValue"
  return null;
}

这是按预期工作的，因为我知道 Function 组件的结构。

Answer 2

为了您的理解，我已尽力使其尽可能简单：-

Javascript 功能：-

function add(a, b) {
  return a + b;
}

反应功能组件：-

import React from 'react';

const DisplayMessage = (props) => {
  return <h1>{props.message}</h1>;
};

export default DisplayMessage;

1. 使用：- JS 函数是专门用来做某事的。 正如您在示例中看到的那样，它只会执行两个数字的加法。而 React 功能组件用于定义 React 中可以呈现给 UI 的组件。 显示组件将呈现功能组件。

2. 定义：- JS 函数使用function关键字定义，而 React 功能组件使用const关键字和箭头 function 定义。

3. 道具：-我们可以传递和接收道具来反应功能组件，但不是太常规的 JS 功能。

4. STATE：- JS function 没有任何 state，而在类中声明的 React 功能组件将具有 state。

5. 渲染：- JS function 不渲染值的任何变化。而 React 功能组件在每次 state 或道具变化时重新渲染。