( )=>React.FC 和 ( )=>JSX.Element 有什么区别

Question

在 React 中，我似乎可以声明一个函数式组件，或者只是一个函数返回一个 JSX 元素。让我困惑的是我不知道这两种方法之间的主要区别。有什么只有一种方法可以做而另一种方法不能做的吗？

import React from "react";

type ItemProps = {
    id: number
    name: string
}

const Item: React.FC<ItemProps> = ({ id, name }) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

const item = ({ id, name }: ItemProps) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

export const Container = () =>
    (
        <section>
            {item({ id: 1, name: "item-1" })}
            <Item id={1} name={"item-1"} />
        </section>
    )

Answer 1

总结差异：

反应.FC:

• 有一个隐式的childrenprop，这意味着即使你的组件不允许子组件，如果你正在使用React.FC并且父组件传递了子组件，打字稿也不会抱怨。这不会对运行时产生任何影响，但最好对 Children 属性更加明确。这可能会在下一版本中消失React.FC，即使现在您可以使用React.VFC
• 与 defaultProps 配合使用效果不佳
• 不允许泛型
• 不能用于注释函数声明，只能用于注释函数表达式
• 使得“组件作为命名空间”模式难以键入

JSX.element + props 接口

• 没有隐式的children prop，所以你需要显式声明它，这很好，而且有些人无论如何都喜欢隐式返回类型。这没有对其他/静态属性（如 等）的默认支持propTypes，displayName因此如果需要，需要显式添加它们。
• 不关心默认属性，这只是参数和返回类型的常规函数​​类型
• 可以与泛型一起使用
• 可用于注释函数声明和表达式

资源

• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/
• https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
• https://github.com/facebook/create-react-app/pull/8177

Answer 2

React.FC提供类型检查支持

您还可以使用 React.FunctionComponent （或简写 React.FC - 它们是相同的）编写组件：

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

与“普通功能”版本的一些区别：

• React.FunctionComponent 对于返回类型是显式的，而普通函数版本是隐式的（或者需要额外的注释）。
• 它为静态属性（如 displayName、propTypes 和 defaultProps）提供类型检查和自动完成功能。
  • 请注意，将 defaultProps 与 React.FunctionComponent 一起使用存在一些已知问题
    。详情请参阅本期。我们维护一个
    单独的 defaultProps 部分，您也可以查找。
• 它提供了儿童的隐式定义

查看文档以获取更多信息

https://github.com/typescript-cheatsheets/react/blob/main/README.md#section-2-getting-started

Answer 3

这两种方法之间的差异记录在此处。

提供类型检查和自动完成，