React 深度解析：类组件 (Class) vs 函数组件 (Function)

⚛️ React 深度解析：类组件 (Class) vs 函数组件 (Function)

在 React 的发展史上，组件的定义方式经历了一次巨大的范式转移。

老一代 React 开发者习惯使用 类组件 (Class Components) ，而现代 React (16.8+) 则全面拥抱 函数组件 (Functional Components) + Hooks。

很多初学者会困惑：

"它们到底有什么区别？"

"为什么官方推荐用函数组件？"

"类组件是不是已经被淘汰了？"

本文将通过本质对比 、代码实战 和核心差异，带你彻底理清这两者的关系。

📂 目录

核心定义：它们长什么样？
关键区别对比表
代码实战：实现同一个计数器
深层原理：为什么函数组件更胜一筹？
[💡 选型指南：现在该怎么写？](#💡 选型指南：现在该怎么写？)

1. 核心定义：它们长什么样？

🏛️ 类组件 (Class Component)

这是 React 早期的主流写法，基于 ES6 的 class 语法。

特点：必须继承 React.Component，拥有 this 上下文，通过生命周期方法（如 componentDidMount）管理副作用。
本质：它是一个类实例，React 会实例化这个类，并维护其状态和生命周期。

⚡ 函数组件 (Functional Component)

这是现代 React 的标准写法。

特点：就是一个普通的 JavaScript 函数，接收 props，返回 JSX。配合 Hooks (useState, useEffect) 使用。
本质：它是一个纯函数渲染逻辑 ，没有实例，没有 this，更加轻量且符合函数式编程思想。

📝 注意：在 Hooks 出现之前，函数组件被称为"无状态组件"，因为它不能管理状态。但自从 React 16.8 引入 Hooks 后，函数组件已经可以完全替代类组件的所有功能。

2. 关键区别对比表

特性	类组件 (Class)	函数组件 (Function + Hooks)
语法结构	ES6 Class，继承 `Component`	普通函数或箭头函数
状态管理	`this.state` / `this.setState`	`useState` Hook
副作用处理	生命周期 (`didMount`, `willUnmount` 等)	`useEffect` Hook
This 指向	❌ 需要手动绑定 `this` (易出错)	✅ 无 `this`，避免绑定问题
代码复用	高阶组件 (HOC) / Render Props (嵌套深)	自定义 Hooks (逻辑复用极佳)
性能优化	`shouldComponentUpdate` / `PureComponent`	`React.memo` / `useMemo` / `useCallback`
打包体积	较大 (包含类继承开销)	较小 (更易被 Tree-shaking)
官方推荐	⚠️ 仅维护旧项目	✅ 新项目的唯一推荐

3. 代码实战：实现同一个计数器

让我们通过一个最简单的"计数器"例子，直观感受两者的写法差异。

✅ 类组件写法 (Old Way)

jsx 复制代码

import React, { Component } from "react";

class CounterClass extends Component {
  // 1. 初始化状态
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    // 2. 手动绑定 this (容易忘记!)
    this.increment = this.increment.bind(this);
  }

  // 3. 定义方法
  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  // 4. 生命周期：组件挂载后执行
  componentDidMount() {
    console.log("Class Component Mounted");
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

⚡ 函数组件写法 (Modern Way)

jsx 复制代码

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

function CounterFunction() {
  // 1. 定义状态 (简洁直观)
  const [count, setCount] = useState(0);

  // 2. 定义方法 (无需绑定 this)
  const increment = () => {
    setCount(count + 1);
  };

  // 3. 副作用：模拟 componentDidMount
  useEffect(() => {
    console.log("Function Component Mounted");
  }, []); // 空依赖数组表示只运行一次

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
    </div>
  );
}

👀 观察对比：

函数组件代码量更少，逻辑更线性。
没有了 constructor、this、render 等 boilerplate code（样板代码）。
useEffect 将相关的逻辑（如订阅和取消订阅）放在一起，而不是分散在不同的生命周期方法中。

4. 深层原理：为什么函数组件更胜一筹？

1. 解决 "Wrapper Hell" (包装地狱)

在类组件时代，为了复用逻辑，我们常用 HOC (高阶组件) 或 Render Props 。这会导致组件树嵌套极深，调试困难。
Hooks 允许我们将逻辑提取为自定义函数（如 useUserLogin），直接在组件内部调用，保持了扁平的组件结构。

2. 更符合人类思维

类组件的生命周期方法（componentDidMount, componentDidUpdate, componentWillUnmount）迫使我们将相关联的逻辑拆分 到不同的地方。

例如：一个聊天室的"订阅消息"和"取消订阅"逻辑，在类组件中要分别写在 didMount 和 willUnmount 里。

而在函数组件中，useEffect 允许我们将相关逻辑写在一起：

javascript 复制代码

useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.friendID, handleStatusChange);
  // 清理函数自动对应 componentWillUnmount
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friendID, handleStatusChange);
  };
}, [props.friendID]);

3. 性能与优化

Tree Shaking：函数更容易被构建工具进行死代码消除。
闭包陷阱 ：虽然函数组件有闭包陷阱的问题，但通过 useRef 和正确的依赖数组管理，可以更精确地控制渲染行为。

💡 选型指南：现在该怎么写？

🟢 强烈推荐：函数组件 + Hooks

所有新项目：请直接使用函数组件。
逻辑复用：使用自定义 Hooks。
性能优化 ：使用 React.memo, useMemo, useCallback。

🔴 仅在以下情况使用类组件：

维护旧项目：公司遗留的大量 Class 组件代码，短期内无法重构。
第三方库限制：极少数老旧库只支持 Class 组件（这种情况在 2024 年已非常罕见）。

⚠️ 重要趋势 ：

React 团队已经明确表示，不会移除类组件 ，但未来的新功能（如 Server Components, Actions）将主要围绕函数组件设计。学习类组件是为了看懂旧代码，掌握函数组件是为了写好新代码。

🎯 总结

维度	结论
未来趋势	函数组件是绝对的主流。
学习曲线	类组件概念简单但代码繁琐；函数组件初期需理解 Hooks 规则，但后期开发效率极高。
最佳实践	忘掉 `this`，拥抱 Hooks。

🚀 博主寄语 ：

如果你还在纠结选哪种，答案只有一个：使用函数组件。它是 React 现在的标准，也是未来的方向。不要害怕 Hooks 的学习曲线，一旦跨越，你将发现 React 开发变得前所未有的流畅和优雅。

希望这篇文档能帮你理清 React 组件演进的思路！如果有疑问，欢迎在评论区留言。👇

喜欢这篇文章吗？记得点赞、收藏、转发哦！ ❤️