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

更新时间：2026年03月25日 09:16:25 作者：英俊潇洒美少年

这篇文章主要介绍了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）

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 替代

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

一句话：

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ReactNative实现的横向滑动条效果
本文介绍了ReactNative实现的横向滑动条效果,本文结合示例代码给大家介绍的非常详细,补充介绍了ReactNative基于宽度变化实现的动画效果,感兴趣的朋友跟随小编一起看看吧
2024-02-02
React改变元素样式的操作代码
这篇文章主要介绍了React技巧之改变元素样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
React前端框架实现原理的理解
React是前端开发每天都用的前端框架，自然要深入掌握它的原理。我用 React 也挺久了，这篇文章就来总结一下我对 react 原理的理解，有需要的朋友可以借鉴参考下，希望能够有所帮助
2022-07-07
React18新特性startTransition详解
React18的新特性startTransition主要是为了优化用户体验,通过标记低优先级的更新任务,如页面重渲染,使它们不会阻塞高优先级的紧急任务如用户输入响应,本文介绍React18新特性startTransition,感兴趣的朋友跟随小编一起看看吧
2024-09-09
React hooks异步操作踩坑记录
这篇文章主要介绍了React hooks异步操作踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React useReducer终极使用教程
useReducer是在react V16.8推出的钩子函数，从用法层面来说是可以代替useState。相信前期使用过 React 的前端同学，大都会经历从class语法向hooks用法的转变，react的hooks编程给我们带来了丝滑的函数式编程体验
2022-10-10
React中实现防抖功能的两种方式小结
这篇文章主要介绍了React中实现防抖功能的两种方式小结,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React 中的重新渲染实现
本文主要介绍了React 中的重新渲染实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
详解使用WebPack搭建React开发环境
这篇文章主要介绍了详解使用WebPack搭建React开发环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
react实现列表滚动组件功能
在开发项目的时候,从服务端获取到数据列表后,展示给用户看,需要实现数据自动滚动效果,怎么实现呢,下面小编给大家分享react实现列表滚动组件功能实现代码,感兴趣的朋友一起看看吧
2023-09-09