这两种使用打字稿创建功能组件的方法有什么区别？答案

【问题标题】：What is the difference between these 2 ways to create a functional component with typescript?这两种使用打字稿创建功能组件的方法有什么区别？
【发布时间】：2019-09-24 14:34:12
【问题描述】：

我搜索以了解这两个功能组件之间的区别：

interface SquareProps {
  cote: string;
  text: string;
  bgc: string;
}

const SquareA: React.FC<SquareProps> = (props) => {...}

和

const SquareB: = (props: SquareProps) => {...}

使用第一种解决方案和第二种解决方案有什么区别？

【问题讨论】：

这些都不是钩子。这些只是功能组件。第一个示例还告诉编译器该函数实际上是一个函数组件，而不是通常的函数。除此之外，它们几乎相同。
我认为是一样的。
@trixn 编辑了问题，因此更清楚了。
你也可以参考一下！关于这个帖子stackoverflow.com/questions/57931632/…stackoverflow.com/questions/57931632/…的答案和cmets，你的问题有一些答案
我在函数中使用钩子，我只是想了解示例中两种方式之间的差异。

标签： reactjs typescript

【解决方案1】：

最好的™ 方法是在键入功能组件时使用React.FC。

它提供关于 defaultProps 和 displayName 等特殊属性的 typescript 类型提示，并将正确的类型添加到 children 等 props 中。

这两种方法都可以创建有效的功能组件，但第一种方法的类型更准确，因此不太可能被误用并提供更好的代码完成。

【讨论】：

我已经隐藏了 {...} 之间的代码但是我在函数中使用了钩子。
@A.Vincent 好的，因为它似乎无关紧要，我从我的答案中删除了它。