【问题标题】：what is the difference between ( )=>React.FC and ( )=>JSX.Element( )=>React.FC 和 ( )=>JSX.Element 有什么区别
【发布时间】：2019-11-01 08:14:08
【问题描述】：

在 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>
    )

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

总结差异：

React.FC：

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

JSX.element + props 接口

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

资源

【讨论】：

【解决方案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 部分。
它提供了子项的隐式定义

【讨论】：

【解决方案3】：

在 React 中，函数的返回是 JSX.Element。甚至React.FC中的声明返回必须是JSX.Element

如果你有隐式返回：

const Component: React.FC = () => {}

如果你有明确的回报

const Component = (): JSX.Element => {}

【讨论】：

你可以告诉我现在还早，你让我谷歌chipden :facepalm:

【解决方案4】：

这两种方法之间的区别记录在here.

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

【讨论】：

这几乎是我正在寻找的答案。不幸的是，链接似乎已更改，因此您引用的部分没有太大帮助。此外，您的答案没有指定哪个选项提供类型检查和自动完成。这让我和刚开始时一样困惑。
Dinesh，您可能应该将链接中的一些重要部分内联到此答案中