React类组件和函数组件的所有核心区别

一句话总结论

React 16 类组件：老写法，用 class、this、生命周期。
React 18 函数组件：新写法，用 Hooks，无 this，更简洁、性能更好。

一、最核心区别（必背）

二、代码直接对比（一看就懂）

1. 定义组件

类组件（React 16）

import React from 'react' class App extends React.Component { render() { return <div>hello</div> } }

函数组件（React 18）

import React from 'react' function App() { return <div>hello</div> }

2. 状态（数据）

类组件

state = { count: 0 } add = () => { this.setState({ count: this.state.count + 1 }) }

函数组件

import { useState } from 'react' const [count, setCount] = useState(0) const add = () => setCount(count + 1)

3. 发起请求（挂载时）

类组件（生命周期）

componentDidMount() { fetch('/api').then(res => res.json()) }

函数组件（useEffect）

useEffect(() => { fetch('/api').then(res => res.json()) }, [])

4. 监听数据变化

类组件

componentDidUpdate(prevProps) { if (prevProps.count !== this.props.count) { // 变化了 } }

函数组件

useEffect(() => { // 变化了 }, [count])

三、生命周期 VS Hooks（超级重要）

类组件的生命周期，全部可以被 useEffect 替代

一句话：
一个 useEffect 搞定类组件所有生命周期！

四、逻辑复用方式（天差地别）

类组件

只能用：

• 高阶组件 HOC
• render props
• mixins（废弃）

→ 代码嵌套多，嵌套地狱

函数组件

自定义 Hooks

function useCount() { const [count, setCount] = useState(0) return [count, setCount] }

→ 干净、简洁、无嵌套、复用极强

五、性能与架构（React 18 关键）

类组件

• 不支持并发渲染
• 不支持自动批处理
• 无法优化逻辑
• this 容易出错

函数组件（React 18）

• 支持并发渲染（页面不卡顿）
• 支持自动批处理（性能暴涨）
• 支持 Suspense、useTransition
• 无 this，无生命周期混乱

六、最简单总结（面试必背）

类组件（React 16）

• 老技术
• 有this
• 生命周期繁多
• 逻辑复用难
• 不支持新特性

函数组件（React 18）

• 现代 React 标准
• 无this
• 用 Hooks 替代一切
• 逻辑复用简单
• 支持所有新特性
• 代码少、易维护、性能高

终极一句话

现在 React 开发，全部用函数组件+Hooks，类组件只用来维护老项目。