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

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

您可能感兴趣的文章:

React中useLayoutEffect钩子使用场景详解
这篇文章主要为大家介绍了React中useLayoutEffect钩子使用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React-Native使用Mobx实现购物车功能
本篇文章主要介绍了React-Native使用Mobx实现购物车功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React路由参数传递与嵌套路由的实现详细讲解
这篇文章主要介绍了React路由参数传递与嵌套路由的实现，嵌套路由原则是可以无限嵌套，但是必须要让使用二级路由的一级路由匹配到，否则不显示，需要的朋友可以参考一下
2022-09-09
React插槽使用方法
本文主要介绍了React插槽使用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
React构建组件的几种方式及区别
这篇文章主要介绍了React构建组件的几种方式及区别，组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念来实现开发的模式文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-08-08
React实现双向绑定示例代码
这篇文章给大家介绍了在React中如何实现双向绑定，文中给出了示例代码，对大家的理解与学习很有帮助，有需要的朋友下面来一起看看吧。
2016-09-09
webpack入门+react环境配置
webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动某个地方就挨个命令去转换再到浏览器去看效果，那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤。
2017-02-02
详解Webpack+Babel+React开发环境的搭建的方法步骤
本篇文章主要介绍了详解Webpack+Babel+React开发环境的搭建的方法步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
React Native基础入门之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是属于web前端领域CSS的一种布局方案，下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-07-07
React入门教程之Hello World以及环境搭建详解
Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。
2017-07-07