React中类组件与函数组件的区别、用法及适用场景咨询

一、工作机制差异 #

类组件 #

基于ES6类实现，必须继承React.Component或React.PureComponent，组件状态（state）是类实例的属性，通过setState()触发状态更新与重渲染。它拥有一套完整的生命周期方法（如componentDidMount、componentDidUpdate、componentWillUnmount），用于在组件不同阶段执行副作用逻辑。

函数组件 #

最初是无状态组件，仅接收props并返回JSX。React 16.8推出Hooks后，函数组件可通过useState、useEffect等Hook管理状态与副作用。每次组件渲染时，函数会被重新执行，Hook会在多次渲染间保留状态，useEffect可模拟类组件的生命周期逻辑。

二、用法示例 #

类组件实现计数器 #

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

  componentDidMount() {
    console.log('类组件挂载完成');
  }

  render() {
    return (
      <div>
        <p>计数：{this.state.count}</p>
        <button onClick={this.increment}>+1</button>
      </div>
    );
  }
}

函数组件实现计数器 #

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

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

  useEffect(() => {
    console.log('函数组件挂载完成');
    return () => console.log('函数组件即将卸载');
  }, []);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

三、选型依据 #

• 优先选函数组件的场景：
  • 新项目开发，追求简洁的代码结构与更低的学习成本
  • 需要复用状态逻辑时，Hooks（如自定义Hook）比类组件的高阶组件（HOC）、渲染属性（Render Props）更简洁灵活
  • 避免this指向问题，函数组件无需处理类实例中的this绑定
• 选类组件的场景：
  • 维护基于React 16.8之前的老项目，已有大量类组件代码
  • 需要使用类组件特有的API（如getSnapshotBeforeUpdate、componentDidCatch，部分已被Hook替代）
  • 团队成员对类组件更熟悉，短期内不想切换Hook

四、性能对比 #

• 默认情况：函数组件每次渲染都会重新执行整个函数，若未优化可能有额外函数创建开销；类组件实例仅创建一次，渲染时仅执行render方法。但这种差异在大多数场景下可忽略。
• 优化后：
  • 函数组件可通过React.memo（浅比较props）、useMemo（缓存计算结果）、useCallback（缓存函数引用）避免不必要重渲染
  • 类组件可通过PureComponent（浅比较state与props）或shouldComponentUpdate（自定义比较逻辑）优化性能
• 特定高效场景：
  • 大量简单展示型组件：函数组件更高效，无需创建类实例，内存开销更小
  • 复杂状态管理场景：两者优化后性能差异不大，但函数组件的Hook更便于拆分与复用逻辑，长期维护成本更低

内容的提问来源于stack exchange，提问作者Abhinay Jha