Question

我一直将React组件（带有打字稿）定义为：

function MyComponent(props: PropsType): React.ReactElement | null {
    //...
}

在线我看到很多例子，例如：

const MyComponent: React.FC = (props: PropsType) => {
    //...
}

我了解它们几乎相同，但是Typescript社区中首选的约定是什么？

Answer 1

在Github上引用React-Typescript Cheatsheet

您还可以使用React.FunctionComponent（或简写React.FC）：

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

与“正常功能”版本有所不同：


它为displayName，propTypes和defaultProps之类的静态属性提供类型检查和自动完成功能-但是   是目前defaultProps与   React.FunctionComponent。参见this issue for details

它提供了children的隐式定义（请参见下文）-但是隐式children类型存在一些问题（例如   DefinitelyTyped#33006），   它可能被认为是更好的样式，对于组件是明确的   仍然消耗children。

const Title: React.FunctionComponent<{ title: string }> = ({  
children, title }) => <div title={title}>{children}</div>;

将来，它可能会自动将道具标记为readonly，但如果在   构造函数。



React.FunctionComponent对于返回类型是显式的，而常规函数的版本是隐式的（否则需要其他形式）   注释）。



在大多数情况下，使用哪种语法几乎没有什么区别，   但是React.FC语法稍微冗长一些，但没有提供   明显的优势，因此优先考虑“正常功能”   语法。

Answer 2

除Boy With Silver Wings answer之外-核心优点是箭头函数表达式组件（const Foo () => <div>Hello</div>）本身可以键入：

const Foo: YourOwnTypeAliasOrInterface = () => <div>Hello</div>

React.FC为您实现了几种类型（子类型或可能的返回类型）。您不能使用命名的函数组件来做到这一点：

function Foo<YourOwnTypeAliasOrInterface>() { // this does not work!! (Only with generics)
  return <div>Hello</div>
}

使用React.FunctionalComponent的TL; TR只需键入更少的内容，因为已经定义了诸如返回类型和子代之类的类型。

type FooProps = {
  title: string;
} & React.FC // <-- intersection type, so it has FooProps and React.FC typings

const Foo: FooProps = ({ children, title }) => { ... }

Answer 3

最近从TypeScript模板创建dropped FC / FunctionComponent类型的用法。

`FC`的缺点：

隐式可选children-更好地显式定义props API
不可能创建通用组件
无需具有显式的ReactElement | null返回类型，该类型还为not accurate；可能是1）更好地由TS自动推断出，也可能是2）明确设置了
FC只是contextTypes，propTypes等静态变量的包装，在大多数情况下并不需要
不能与defaultProps配合使用（请注意：无论如何，JS默认参数应该为preferred）
无需记住“魔术”类型-只需为组件使用函数
不会使您的代码更精简

因此，总而言之，我宁愿相反：普通（箭头）函数> React.FC。

为什么React.FunctionComponenent优于常规函数定义？

3 个答案:

`FC`的缺点：

为什么React.FunctionComponenent优于常规函数定义？

3 个答案:

FC的缺点：

`FC`的缺点：