React 组件类型详解：类组件 vs. 函数组件

news2025/4/21 1:34:58

React 是一个用于构建用户界面的 JavaScript 库，其核心思想是组件化开发。React 组件可以分为类组件（Class Components）和函数组件（Function Components），它们在设计理念、使用方式和适用场景上有所不同。随着 React Hooks 的引入，函数组件的能力得到了极大增强，逐渐成为开发者的首选。本文将深入探讨 React 组件的类型、区别、优缺点，以及如何选择合适的组件类型。

1. 类组件（Class Components）

1.1 基本概念

类组件是 React 早期的主要组件形式，通过 ES6 的 class 语法定义，并继承 React.Component 或 React.PureComponent。类组件必须包含 render() 方法，用于返回 JSX。

1.2 基本结构

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this); // 绑定 this
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  componentDidMount() {
    console.log("组件已挂载");
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        点击次数: {this.state.count}
      </button>
    );
  }
}

1.3 特点

状态管理
使用 this.state 存储状态，并通过 this.setState() 更新状态。
生命周期方法
提供 componentDidMount、componentDidUpdate、componentWillUnmount 等方法，用于处理副作用（如数据获取、订阅事件）。
this 绑定问题
类组件的方法需要手动绑定 this，否则在事件处理时可能丢失上下文。
性能优化
PureComponent 可自动实现 shouldComponentUpdate 的浅比较优化。

1.4 适用场景

需要复杂生命周期控制的组件（如数据获取、动画管理）。
旧版 React 项目（尚未迁移到 Hooks）。
需要 Error Boundaries（错误边界）的情况（目前 Hooks 无法完全替代）。

2. 函数组件（Function Components）

2.1 基本概念

函数组件最初只是无状态的 UI 渲染函数，但 React 16.8 引入 Hooks 后，函数组件可以管理状态和副作用，成为 React 开发的主流方式。

2.2 基本结构

import React, { useState, useEffect } from 'react';

function Counter(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("组件已挂载");
  }, []);

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数: {count}
    </button>
  );
}

2.3 特点

Hooks 管理状态
useState 用于状态管理，useEffect 替代生命周期方法。
无 this 绑定问题
函数组件直接使用闭包访问 props 和 state，无需 this 绑定。
代码更简洁
逻辑更聚合，易于理解和测试。
性能优化
React.memo 可缓存组件，避免不必要的渲染。

2.4 适用场景

新项目开发，优先使用函数组件 + Hooks。
需要更简洁、可维护性更高的代码。
需要复用逻辑（可通过自定义 Hooks 实现）。

3. 类组件 vs. 函数组件的核心区别

特性	类组件	函数组件
定义方式	`class` 继承 `React.Component`	普通函数
状态管理	`this.state` + `setState`	`useState` + `useReducer`
生命周期	`componentDidMount` 等	`useEffect` + `useLayoutEffect`
`this` 绑定	需要手动绑定	无 `this`，直接访问变量
代码复杂度	较高（尤其是生命周期逻辑）	更简洁，逻辑聚合
性能优化	`PureComponent`	`React.memo` + `useMemo`
未来趋势	逐渐被函数组件取代	React 官方推荐

4. 其他组件类型

4.1 PureComponent

React.PureComponent 是 React.Component 的优化版本，自动实现 shouldComponentUpdate 的浅比较，避免不必要的渲染。

4.2 Memoized 函数组件

React.memo 是函数组件的优化方式，类似于 PureComponent，对 props 进行浅比较：

const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

4.3 高阶组件（HOC）

高阶组件（Higher-Order Component）是一种设计模式，用于复用组件逻辑：

function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Component mounted");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}