什么是React.FC

FC的概念

FC是React提供的一个Typescript泛型类型，表示这是一个函数式组件。

React.FC<P>
// 或 React.FunctionComponent<P>

其中，P表示组件的props类型。 比如我们有一个简单的函数式组件：

interface UserCardProps {
    name: string;
    age: number;
}
 
const UserCard: FC<UserCardProps> = ({name, age}) => {
    return (
        <div>
            <h3>{name}</h3>
            <p>Age: {age}</p>
        </div>
    );
}

这表示：

• UserCard是一个函数组件
• 接收的props必须符合UserCardProps
• Typescript会根据接口自动判断props类型，并提示错误

FC的特性

1. 自动推断props类型
2. 自动添加children类型：FC会默认在props中加上一个可选字段children?:ReactNode
3. 返回类型是ReactElement

三、React的缺点

1. 会自动添加children节点，有时候组件不需要children
2. 泛型受限，对带泛型的组件的支持都不够友好
3. 返回类型不灵活，默认返回ReactElement，有时候组件会返回null、string等，不合适
4. TS类型推断不够精确

因而，对于FC，现在更加推荐手动声明props类型+明确返回类型：

interface UserCardProps {
    name: string;
    age: number;
}
 
const UserCard: = ({name, age}:UserCardProps)JSX.Element => {
    return (
        <div>
            <h3>{name}</h3>
            <p>Age: {age}</p>
        </div>
    );
}

补充：class组件的泛型类型是React.Component，不过React17后对class组件的使用大量减少，现在更加推荐函数式组件+hooks的组合。