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

一句话总结论

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

一、最核心区别（必背）

对比	React 16 类组件	React 18 函数组件（Hooks）
写法	`class extends Component`	`function + Hooks`
this	必须用 this	完全没有 this
状态	`this.state` / `this.setState`	`useState`
生命周期	`componentDidMount` 等	`useEffect` 一统天下
逻辑复用	mixins / HOC / renderProps	自定义 Hooks
代码量	多、臃肿	少、简洁
并发渲染	不支持	完美支持
性能	一般	更好

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

1. 定义组件

类组件（React 16）

jsx 复制代码

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

函数组件（React 18）

jsx 复制代码

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

2. 状态（数据）

类组件

jsx 复制代码

state = { count: 0 }

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

函数组件

jsx 复制代码

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

const add = () => setCount(count + 1)

3. 发起请求（挂载时）

类组件（生命周期）

jsx 复制代码

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

函数组件（useEffect）

jsx 复制代码

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

4. 监听数据变化

类组件

jsx 复制代码

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

函数组件

jsx 复制代码

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

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

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

类组件生命周期	函数组件 Hooks
`constructor`	`useState`
`componentDidMount`	`useEffect(..., [])`
`componentDidUpdate`	`useEffect(..., [依赖])`
`componentWillUnmount`	`useEffect` 返回清理函数
`shouldComponentUpdate`	`React.memo`

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

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

类组件

只能用：

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

→ 代码嵌套多，嵌套地狱

函数组件

自定义 Hooks

jsx 复制代码

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，类组件只用来维护老项目。