React.FC（React.FunctionComponent）介绍（为函数式组件提供的泛型类型定义）（已不推荐使用，推荐显示声明props类型，推荐直接用普通函数定义组件）

了解 React.FC：函数式组件的类型定义与最佳实践

在使用 TypeScript + React 开发时，我们经常会看到这样的写法：

const Hello: React.FC = () => {
  return <h1>Hello World</h1>;
};

这就是 React.FC（或 React.Function***ponent） 的用法。
那么，React.FC 到底是什么？它的优缺点有哪些？在现代 React 项目中，我们是否还应该使用它？本文将带你全面了解。

一、什么是 React.FC？

React.FC 是 React 官方为 函数式组件（Functional ***ponent） 提供的 泛型类型定义。

在 TypeScript 项目中，它的定义大致如下：

type FC<P = {}> = Function***ponent<P>;

interface Function***ponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

可以看到，React.FC 其实是一个函数类型，接受泛型参数 P（组件 props 的类型），并返回一个 React 元素。
这使得组件在书写时具备 类型安全 和 自动补全 的优势。

二、基本用法

假设我们有一个简单的组件，它接收一个 name 属性：

import React from "react";

interface HelloProps {
  name: string;
}

const Hello: React.FC<HelloProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Hello;

使用时：

<Hello name="React" />

这段代码在编辑器中拥有完整的类型推导与自动补全，非常方便。

三、React.FC 的特点

✅ 优点

1. 类型自动推导 children

React.FC 会自动在 props 中添加 children，不需要手动定义：

const Box: React.FC = ({ children }) => <div>{children}</div>;

2. 更好的可读性

在代码审查或团队协作时，一眼就能看出这是一个函数组件。

3. 内置类型支持

包含了 defaultProps、propTypes、displayName 等可选属性定义。

⚠️ 缺点

1. 自动包含 children 不总是需要

有些组件并不接收 children，而 React.FC 会自动添加这一属性，可能造成类型误导。

2. 限制返回类型

React.FC 规定组件必须返回 ReactElement 或 null，而有时我们希望返回其他内容（例如字符串或数字）。

3. 社区推荐度下降

自 React 18 起，React 官方团队不再推荐使用 React.FC，因为它带来的好处有限，同时有一定的类型噪音。

四、推荐的现代写法（建议用interface，参数可自动合并，方便扩展，不推荐用type）

更现代、更灵活的 TypeScript 写法是 直接使用函数声明并显式声明 props 类型：

interface HelloProps {
  name: string;
}

function Hello({ name }: HelloProps) {
  return <h1>Hello, {name}!</h1>;
}

或使用箭头函数：

type HelloProps = {
  name: string;
};

const Hello = ({ name }: HelloProps) => {
  return <h1>Hello, {name}!</h1>;
};

如果组件确实需要 children，可以显式地添加：

interface BoxProps {
  children: React.ReactNode;
}

const Box = ({ children }: BoxProps) => <div>{children}</div>;

五、总结

✅ 结论建议：

• 新项目或团队项目中 建议不再使用 React.FC；
• 旧项目或个人项目中，若代码已大量使用，可继续保留，无需强制迁移。

六、参考资料

• React TypeScript Cheatsheets - Function ***ponents
• TypeScript Handbook - React & JSX
• React Docs - TypeScript Support

总结一句话：

React.FC 是 TypeScript 为 React 函数组件提供的历史遗留类型方案，理解它很重要，但现代 React 开发更推荐直接使用普通函数定义组件。