React.FC与React.Component
在 React 中，React.FC（Function Component）和 React.Component 是两种不同的组件定义方式，分别对应函数组件和类组件。以下是它们的主要区别和特点：
1. React.FC（函数组件）
React.FC 是 TypeScript 中用于定义函数组件的类型。它显式声明一个组件是函数组件，并提供了类型检查支持。
特点：
- 函数式语法：使用 JavaScript/TypeScript 函数定义组件。
- 内置类型支持：
- 自动包含
children属性（即使未在 props 中声明）。 - 提供泛型支持，明确 props 的类型。
- 自动包含
- 简洁性：无需处理
this，适合简单组件。 - Hooks 友好：天然支持 Hooks（如
useState、useEffect）。
示例：
interface Props {name: string;
}const MyComponent: React.FC<Props> = ({ name, children }) => {return (<div>Hello, {name}! {children}</div>);
};
注意：
- React 18 后，
React.FC不再隐式包含children，需手动声明。 - 社区逐渐倾向于不使用
React.FC，而是直接标注函数返回值类型（JSX.Element）。
2. React.Component（类组件）
React.Component 是 ES6 类组件的基类，通过继承它来定义类组件。
特点：
- 面向对象：基于类的继承和生命周期方法。
- 状态管理：通过
this.state和this.setState()管理内部状态。 - 生命周期方法：如
componentDidMount、shouldComponentUpdate等。 - 泛型支持：
React.Component<Props, State>可指定 props 和 state 类型。
示例：
interface Props {name: string;
}interface State {count: number;
}class MyComponent extends React.Component<Props, State> {state: State = { count: 0 };render() {return (<div>Hello, {this.props.name}! Count: {this.state.count}</div>);}
}
关键区别
| 特性 | React.FC (函数组件) | React.Component (类组件) |
|---|---|---|
| 语法 | 函数 | 类 |
| 状态管理 | 使用 useState Hook | this.state + setState |
| 生命周期 | useEffect Hook | 原生生命周期方法（如 componentDidMount） |
this 绑定问题 | 无 | 需要处理事件处理函数的 this 绑定 |
| TypeScript 支持 | 显式 props 类型（泛型） | 通过泛型定义 props 和 state |
| 性能 | 轻量，适合简单逻辑 | 略重，适合复杂生命周期控制 |
如何选择？
- 优先函数组件：现代 React 开发推荐使用函数组件 + Hooks，代码更简洁且易于测试。
- 类组件的场景：
- 需要兼容旧代码库。
- 需要精确控制生命周期（但大多数场景可用
useEffect替代）。 - 需要
Error Boundaries（目前函数组件无法直接实现）。
React 18+ 的调整
React.FC的children不再隐式存在，需显式定义：interface Props {children?: React.ReactNode; }- 类组件的
componentWillUnmount等生命周期逐渐被 Hooks 替代。
建议在新项目中优先使用函数组件，除非有明确需求必须用类组件。