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
性能	轻量，适合简单逻辑	略重，适合复杂生命周期控制

---

如何选择？

1. 优先函数组件：现代 React 开发推荐使用函数组件 + Hooks，代码更简洁且易于测试。
2. 类组件的场景：
   • 需要兼容旧代码库。
   • 需要精确控制生命周期（但大多数场景可用 useEffect 替代）。
   • 需要 Error Boundaries（目前函数组件无法直接实现）。

---

React 18+ 的调整

• React.FC 的 children 不再隐式存在，需显式定义：

  interface Props {
    children?: React.ReactNode;
  }
  

• 类组件的 componentWillUnmount 等生命周期逐渐被 Hooks 替代。

建议在新项目中优先使用函数组件，除非有明确需求必须用类组件。