你想了解的类组件（Class Component）和函数式组件（Functional Component）是 React 中两种核心的组件编写方式，前者是 React 早期的主流方案，后者则在 Hooks 推出后成为官方推荐的首选。本文会从语法结构、状态管理、生命周期、性能、使用场景等维度，帮你理清二者的核心区别，以及不同场景下的选型思路。
一、核心定义与语法差异
1. 类组件（Class Component）
类组件是基于 ES6 类语法创建的组件，必须继承React.Component或React.PureComponent，并通过render()方法返回 JSX。
jsx
import React from 'react'; // 类组件示例 class ClassCounter extends React.Component { // 构造函数：初始化状态、绑定方法 constructor(props) { super(props); // 初始化state this.state = { count: 0 }; // 手动绑定this（避免回调中this丢失） this.handleIncrement = this.handleIncrement.bind(this); } // 自定义方法 handleIncrement() { // 修改状态（必须用setState） this.setState({ count: this.state.count + 1 }); } // 必须实现render方法 render() { return ( <div> <p>计数：{this.state.count}</p> <button onClick={this.handleIncrement}>+1</button> </div> ); } }2. 函数式组件（Functional Component）
函数式组件本质是一个普通的 JavaScript 函数，接收props作为参数，直接返回 JSX。Hooks（React 16.8+）推出后，函数式组件才具备了状态管理和生命周期能力。
jsx
import React, { useState } from 'react'; // 函数式组件示例 function FunctionalCounter(props) { // 用useState Hook管理状态 const [count, setCount] = useState(0); // 自定义方法（无需绑定this） const handleIncrement = () => { // 直接修改状态 setCount(count + 1); }; // 直接返回JSX，无需render方法 return ( <div> <p>计数：{count}</p> <button onClick={handleIncrement}>+1</button> </div> ); }二、核心区别对比
为了让你更清晰地对比，我整理了关键维度的差异表：
| 对比维度 | 类组件（Class Component） | 函数式组件（Functional Component） |
|---|---|---|
| 语法结构 | 基于 ES6 Class，需继承 React.Component | 普通 JS 函数，语法更简洁，无冗余代码 |
| 状态管理 | 用this.state和setState()管理状态 | 用useState/useReducerHooks 管理状态 |
| this 指向 | 存在 this，需手动绑定（或用箭头函数） | 无 this，避免 this 指向混乱问题 |
| 生命周期 | 有明确的生命周期方法（componentDidMount 等） | 用useEffectHook 模拟所有生命周期逻辑 |
| 性能优化 | 可继承PureComponent或实现shouldComponentUpdate | 用React.memo（浅比较 props）+useMemo/useCallback优化 |
| 代码复用 | 依赖高阶组件（HOC）、Render Props | 依赖 Hooks（更简洁，无嵌套地狱） |
| 错误边界 | 仅类组件可作为错误边界（实现 componentDidCatch） | 无法直接作为错误边界（需包裹类组件） |
| 官方推荐 | 仅兼容老项目，不推荐新开发 | React 16.8 + 官方首选方案 |
三、关键能力深度解析
1. 状态管理差异
类组件
- 状态是对象形式，
this.state = { count: 0, name: 'test' }； - 修改状态必须用
setState()，且setState是异步更新（合成事件中），可能需要依赖前一个状态：jsx
// 正确：依赖前状态更新 this.setState(prevState => ({ count: prevState.count + 1 })); - 无法在函数中直接捕获最新状态（需用 ref 或 setState 回调）。
函数式组件
- 状态可以是任意类型（数字、字符串、对象、数组等），
useState按需求拆分：jsx
const [count, setCount] = useState(0); const [user, setUser] = useState({ name: '张三' }); setState是直接替换（而非合并），更新对象 / 数组时需手动合并：jsx
// 更新对象：合并原有属性 setUser(prev => ({ ...prev, age: 25 }));- 能通过闭包直接捕获最新状态（但需注意依赖项问题）。
2. 生命周期模拟（函数式组件 vs 类组件）
类组件的生命周期方法在函数式组件中都能通过useEffect模拟，对应关系如下：
| 类组件生命周期 | 函数式组件实现方式 |
|---|---|
| componentDidMount | useEffect (() => { /* 逻辑 */ }, []) |
| componentDidUpdate | useEffect (() => { /* 逻辑 */ }, [依赖项]) |
| componentWillUnmount | useEffect (() => { return () => { /* 清理 */ } }, []) |
| componentDidMount + componentDidUpdate | useEffect (() => { /* 逻辑 */ }) |
示例：模拟类组件的生命周期
jsx
// 函数式组件模拟生命周期 function LifecycleDemo() { const [count, setCount] = useState(0); // componentDidMount：仅挂载时执行 useEffect(() => { console.log('组件挂载'); // componentWillUnmount：清理函数 return () => { console.log('组件卸载'); }; }, []); // componentDidUpdate：count变化时执行 useEffect(() => { console.log('count更新为：', count); }, [count]); return ( <div> <p>{count}</p> <button onClick={() => setCount(count + 1)}>+1</button> </div> ); }3. 性能优化差异
类组件优化
- 继承
React.PureComponent：自动对props和state做浅比较，避免不必要的重渲染； - 手动实现
shouldComponentUpdate：自定义比较逻辑，返回false阻止重渲染。
函数式组件优化
React.memo：高阶组件，对props做浅比较，类似PureComponent；useMemo：缓存计算结果，避免每次渲染重复计算；useCallback：缓存函数引用，避免因函数重新创建导致子组件重渲染。
示例：函数式组件性能优化
jsx
// React.memo：浅比较props const MemoizedChild = React.memo(({ onIncrement }) => { console.log('子组件渲染'); return <button onClick={onIncrement}>+1</button>; }); function Parent() { const [count, setCount] = useState(0); // useCallback：缓存函数引用 const handleIncrement = useCallback(() => { setCount(count + 1); }, [count]); // useMemo：缓存计算结果 const doubleCount = useMemo(() => { return count * 2; }, [count]); return ( <div> <p>计数：{count}，双倍：{doubleCount}</p> <MemoizedChild onIncrement={handleIncrement} /> </div> ); }四、使用场景与选型建议
1. 优先使用函数式组件的场景
- 新项目开发：React 官方推荐，代码更简洁、易维护；
- 需要复用逻辑：Hooks（如
useState、useEffect、自定义 Hook）比 HOC/Render Props 更优雅； - 团队协作：降低学习成本（无需理解 this、生命周期），减少 bug；
- 性能敏感场景：通过
React.memo+useCallback/useMemo可精准优化。
2. 仍需使用类组件的场景
- 维护老项目：老代码基于类组件，无需强行重构；
- 实现错误边界：函数式组件无法直接实现
componentDidCatch，需用类组件：jsx
class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.log('捕获错误：', error, info); } render() { if (this.state.hasError) { return <div>出错了！</div>; } return this.props.children; } } // 使用：包裹函数式组件 <ErrorBoundary> <FunctionalComponent /> </ErrorBoundary> - 极少数复杂场景：如需要深度定制
shouldComponentUpdate且 Hooks 优化成本更高。
五、迁移指南（类组件 → 函数式组件）
如果需要将类组件迁移为函数式组件，可遵循以下步骤：
- 替换类定义为函数：移除
class、extends React.Component，改为函数接收props； - 替换 state：将
this.state拆分为多个useState； - 替换生命周期：用
useEffect模拟componentDidMount/DidUpdate/WillUnmount； - 移除 this 绑定：函数内方法无需绑定 this，直接定义箭头函数或普通函数；
- 替换 this.props：直接使用函数参数
props； - 性能优化：用
React.memo替代PureComponent，useCallback/useMemo替代手动优化。
迁移示例：
jsx
// 类组件 class OldComponent extends React.Component { state = { text: '' }; componentDidMount() { console.log('挂载'); } handleChange = (e) => { this.setState({ text: e.target.value }); }; render() { return <input value={this.state.text} onChange={this.handleChange} />; } } // 迁移后的函数式组件 function NewComponent(props) { const [text, setText] = useState(''); useEffect(() => { console.log('挂载'); }, []); const handleChange = (e) => { setText(e.target.value); }; return <input value={text} onChange={handleChange} />; } // 性能优化：添加React.memo const MemoizedNewComponent = React.memo(NewComponent);总结
- 核心差异：类组件基于 ES6 Class，依赖
this和生命周期方法；函数式组件是纯函数，依赖 Hooks 实现状态和生命周期，语法更简洁、无 this 陷阱。 - 选型原则：新项目优先用函数式组件 + Hooks，老项目 / 错误边界场景保留类组件。
- 优化方式：类组件用
PureComponent/shouldComponentUpdate，函数式组件用React.memo+useCallback/useMemo。
掌握二者的区别和选型思路，能让你在 React 开发中更灵活地选择合适的组件形式，写出更高效、易维护的代码。
👉 **觉得有用的点点关注谢谢~**
)
