React類組件和函數(shù)組件的所有核心區(qū)別及說明
更新時(shí)間：2026年03月25日 09:16:25 作者：英俊瀟灑美少年
這篇文章主要介紹了React類組件和函數(shù)組件的所有核心區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一句話總結(jié)論
React 16 類組件：老寫法，用 class、this、生命周期。
React 18 函數(shù)組件：新寫法，用 Hooks，無 this，更簡潔、性能更好。
一、最核心區(qū)別（必背）
| 對(duì)比 | React 16 類組件 | React 18 函數(shù)組件（Hooks） |
|---|---|---|
| 寫法 | class extends Component | function + Hooks |
| this | 必須用 this | 完全沒有 this |
| 狀態(tài) | this.state / this.setState | useState |
| 生命周期 | componentDidMount 等 | useEffect 一統(tǒng)天下 |
| 邏輯復(fù)用 | mixins / HOC / renderProps | 自定義 Hooks |
| 代碼量 | 多、臃腫 | 少、簡潔 |
| 并發(fā)渲染 | 不支持 | 完美支持 |
| 性能 | 一般 | 更好 |
二、代碼直接對(duì)比（一看就懂）
1. 定義組件
類組件（React 16）
import React from 'react'
class App extends React.Component {
render() {
return <div>hello</div>
}
}
函數(shù)組件（React 18）
import React from 'react'
function App() {
return <div>hello</div>
}
2. 狀態(tài)（數(shù)據(jù)）
類組件
state = { count: 0 }
add = () => {
this.setState({ count: this.state.count + 1 })
}
函數(shù)組件
import { useState } from 'react'
const [count, setCount] = useState(0)
const add = () => setCount(count + 1)
3. 發(fā)起請(qǐng)求（掛載時(shí)）
類組件（生命周期）
componentDidMount() {
fetch('/api').then(res => res.json())
}
函數(shù)組件（useEffect）
useEffect(() => {
fetch('/api').then(res => res.json())
}, [])
4. 監(jiān)聽數(shù)據(jù)變化
類組件
componentDidUpdate(prevProps) {
if (prevProps.count !== this.props.count) {
// 變化了
}
}
函數(shù)組件
useEffect(() => {
// 變化了
}, [count])
三、生命周期 VS Hooks（超級(jí)重要）
類組件的生命周期，全部可以被 useEffect 替代
| 類組件生命周期 | 函數(shù)組件 Hooks |
|---|---|
| constructor | useState |
| componentDidMount | useEffect(..., []) |
| componentDidUpdate | useEffect(..., [依賴]) |
| componentWillUnmount | useEffect 返回清理函數(shù) |
| shouldComponentUpdate | React.memo |
一句話：
一個(gè) useEffect 搞定類組件所有生命周期！
四、邏輯復(fù)用方式（天差地別）
類組件
只能用：
- 高階組件 HOC
- render props
- mixins（廢棄）
→ 代碼嵌套多，嵌套地獄
函數(shù)組件
自定義 Hooks
function useCount() {
const [count, setCount] = useState(0)
return [count, setCount]
}
→ 干凈、簡潔、無嵌套、復(fù)用極強(qiáng)
五、性能與架構(gòu)（React 18 關(guān)鍵）
類組件
- 不支持 并發(fā)渲染
- 不支持 自動(dòng)批處理
- 無法優(yōu)化邏輯
- this 容易出錯(cuò)
函數(shù)組件（React 18）
- 支持 并發(fā)渲染（頁面不卡頓）
- 支持 自動(dòng)批處理（性能暴漲）
- 支持 Suspense、useTransition
- 無 this，無生命周期混亂
六、最簡單總結(jié)（面試必背）
類組件（React 16）
- 老技術(shù)
- 有
this - 生命周期繁多
- 邏輯復(fù)用難
- 不支持新特性
函數(shù)組件（React 18）
- 現(xiàn)代 React 標(biāo)準(zhǔn)
- 無
this - 用 Hooks 替代一切
- 邏輯復(fù)用簡單
- 支持所有新特性
- 代碼少、易維護(hù)、性能高
終極一句話
現(xiàn)在 React 開發(fā)，全部用函數(shù)組件+Hooks，類組件只用來維護(hù)老項(xiàng)目。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了React中useLayoutEffect鉤子使用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React-Native使用Mobx實(shí)現(xiàn)購物車功能
本篇文章主要介紹了React-Native使用Mobx實(shí)現(xiàn)購物車功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
React路由參數(shù)傳遞與嵌套路由的實(shí)現(xiàn)詳細(xì)講解
這篇文章主要介紹了React路由參數(shù)傳遞與嵌套路由的實(shí)現(xiàn)，嵌套路由原則是可以無限嵌套，但是必須要讓使用二級(jí)路由的一級(jí)路由匹配到，否則不顯示，需要的朋友可以參考一下2022-09-09
本文主要介紹了React插槽使用方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了React構(gòu)建組件的幾種方式及區(qū)別，組件就是把圖形、非圖形的各種邏輯均抽象為一個(gè)統(tǒng)一的概念來實(shí)現(xiàn)開發(fā)的模式文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
這篇文章給大家介紹了在React中如何實(shí)現(xiàn)雙向綁定，文中給出了示例代碼，對(duì)大家的理解與學(xué)習(xí)很有幫助，有需要的朋友下面來一起看看吧。2016-09-09
webpack是一個(gè)前端資源模塊化管理和打包工具，說白了就是方便我們管理自己的常用的一些代碼，比如你開發(fā)中用到sass以及jade同時(shí)用到es6，開發(fā)時(shí)你不可能改動(dòng)某個(gè)地方就挨個(gè)命令去轉(zhuǎn)換再到瀏覽器去看效果，那樣效率是非常低的。所以webpack幫我們省去了那些多余的步驟。2017-02-02
詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟
本篇文章主要介紹了詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是屬于web前端領(lǐng)域CSS的一種布局方案，下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-07-07
React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產(chǎn)生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關(guān)于React入門教程之Hello World以及環(huán)境搭建的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07