当前位置：首页 > news >正文

类组件(Classcomponent)和函数式组件 (Functionalcomponent)之间有何不同？

news 2026/6/11 21:28:14

在 React 中，类组件 (Class Component) 和函数式组件 (Functional Component) 都是用来定义 UI 的两种方式，但它们在语法、生命周期管理、状态处理等方面有显著区别。

定义方式

类型	定义示例
类组件	`jsx<br>class MyComponent extends React.Component {<br> render() {<br> return <div>Hello, {this.props.name}</div>;<br> }<br>}<br>`
函数组件	`jsx<br>function MyComponent(props) {<br> return <div>Hello, {props.name}</div>;<br>}<br>`

状态管理（State）

特性	类组件	函数组件
状态定义	`this.state = { count: 0 }`	`const [count, setCount] = useState(0)`
状态更新	`this.setState({ count: this.state.count + 1 })`	`setCount(count + 1)`
是否支持 Hooks	❌ 不支持	✅ 支持所有 Hooks（useState、useEffect、useMemo等）

生命周期（Lifecycle）

生命周期	类组件写法	函数组件对应写法
初始化	`componentDidMount()`	`useEffect(() => { ... }, [])`
更新	`componentDidUpdate()`	`useEffect(() => { ... })`
卸载	`componentWillUnmount()`	`useEffect(() => { return () => {...} }, [])`

this 的区别

比较点	类组件	函数组件
是否使用 `this`	✅ 需要（访问 props/state）	❌ 不需要
绑定问题	必须在构造函数中绑定方法（或用箭头函数）	自动闭包捕获上下文，无需绑定

性能与简洁性

函数组件更轻量、可读性高
类组件稍显冗长，逻辑分散在多个生命周期函数中
React 团队官方推荐：优先使用函数组件 + Hooks

例子对比

类组件版

class Counter extends React.Component {state = { count: 0 };componentDidMount() {console.log('Mounted!');}render() {return (<button onClick={() => this.setState({ count: this.state.count + 1 })}>Count: {this.state.count}</button>);}
}

函数组件版（推荐）

import { useState, useEffect } from 'react';function Counter() {const [count, setCount] = useState(0);useEffect(() => {console.log('Mounted!');}, []);return (<button onClick={() => setCount(count + 1)}>Count: {count}</button>);
}

总结表

特性	类组件	函数组件
写法简洁	❌	✅
支持 Hooks	❌	✅
性能优化	一般	较好（React.memo等）
生命周期写法	复杂	简洁（useEffect统一处理）
推荐使用	不推荐新项目使用	✅ 官方推荐