组件化开发实践：函数组件与类组件对比 = 飞龙博客

组件化开发实践：函数组件与类组件对比

(4) feilong.org 修订于2026-07-03 09:23:28 react教程

函数组件与类组件的核心差异

在React 16.8版本引入Hooks之前，类组件是构建复杂UI的主要方式。随着函数组件和Hooks的普及，开发者逐渐倾向于使用更简洁的函数式写法。本文将从语法结构、功能特性及开发实践三个维度对比函数组件与类组件的异同，并探讨其适用场景。

---

一、基础概念对比

1. 函数组件（Function Component）
函数组件是通过JavaScript函数定义的组件，核心特征包括：
- 纯函数形式：仅接收props作为参数并返回JSX
- 必须声明React.FC类型（TypeScript中）或使用泛型
- 支持Hooks实现状态管理与副作用

// 函数组件示例  
const Counter = ({ initialCount }: { initialCount: number }) => {
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
};

// 函数组件示例

const Counter = ({ initialCount }: { initialCount: number }) => {

const [count, setCount] = useState(initialCount);

return (

<div>

<p>当前计数：{count}</p>

<button onClick={() => setCount(count + 1)}>增加</button>

</div>

);

};

2. 类组件（Class Component）
类组件基于ES6类语法实现，核心特征包括：
- 必须继承React.Component
- 使用constructor初始化state和绑定方法
- 需要显式定义生命周期方法（如componentDidMount）

// 类组件示例  
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>当前计数：{this.state.count}</p>
        <button onClick={this.increment}>增加</button>
      </div>
    );
  }
}

// 类组件示例

class Counter extends React.Component {

constructor(props) {

super(props);

this.state = { count: props.initialCount };

}

increment = () => {

this.setState(prevState => ({ count: prevState.count + 1 }));

};

render() {

return (

<div>

<p>当前计数：{this.state.count}</p>

</div>

);

}

---

二、功能特性对比

| 特性 | 函数组件 | 类组件 |
|---------------------|-----------------------------------|-------------------------------|
| 状态管理 | 使用useState等Hooks | 通过this.state和setState |
| 生命周期方法 | 使用useEffect替代 | 需显式定义多个生命周期方法 |
| 副作用处理 | useEffect统一管理 | 分散在多个生命周期中 |
| 组件通信 | props传递，context共享 | props传递，

static contextType

1	static contextType

关键差异点分析：
1. 状态逻辑集中度
函数组件通过Hooks将状态与视图直接关联，避免类组件中this.state和this.setState的分散式管理。

2. 生命周期统一性
useEffect替代了类组件中多个分散的生命周期方法（如componentDidMount、componentDidUpdate），降低维护复杂度。

3. 可测试性
函数组件可通过Mock Hooks实现单元测试，而类组件需要借助工具库（如enzyme）模拟this.state和this.props。

---

三、开发实践建议

1. 推荐使用函数组件的场景
- 简单UI组件：无需复杂状态管理或生命周期逻辑
- 高频更新场景：通过useMemo和useCallback优化性能
- 可复用逻辑：利用自定义Hooks封装业务逻辑

// 自定义Hook示例  
const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(storedValue));
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
};

// 自定义Hook示例

const useLocalStorage = (key, initialValue) => {

const [storedValue, setStoredValue] = useState(() => {

try {

const item = window.localStorage.getItem(key);

return item ? JSON.parse(item) : initialValue;

} catch (error) {

console.log(error);

return initialValue;

}

});

useEffect(() => {

window.localStorage.setItem(key, JSON.stringify(storedValue));

}, [key, storedValue]);

return [storedValue, setStoredValue];

};

2. 类组件的适用场景
- 需要严格控制生命周期的复杂组件（如表单验证、第三方库集成）
- 兼容旧项目迁移：渐进式替换部分功能模块
- 处理深层嵌套状态时，使用context或Redux更高效

---

四、未来趋势与选择策略

React官方文档已明确推荐优先使用函数组件和Hooks。对于新项目，建议遵循以下原则：
1. 优先级排序
- 基础UI组件 → 函数组件 + Hooks
- 复杂业务逻辑组件 → 自定义Hook封装
2. 迁移策略
- 逐步替换类组件为函数组件
- 对遗留代码使用React.forwardRef和useImperativeHandle实现兼容

3. 性能优化
- 使用React.memo避免不必要的渲染
- 复杂计算通过useMemo缓存结果

---

结语

函数组件与类组件并非对立关系，而是开发者根据项目需求选择的工具。随着Hooks生态的完善，函数组件在代码简洁性、可维护性和性能表现上具有明显优势。建议结合团队技术栈和项目复杂度，灵活选择组件类型，并持续关注React官方推荐的最佳实践。

更新网址：https://feilong.org/function-component-vs-class-component
最初发布：20260703 09:23:28 feilong.org 于广州

加入收藏夹，查看更方便。

新作：状态管理初探：useState与useEffect使用指南

旧文：JSX语法详解：组件构建与元素渲染

飛龍博客