react的 useReducer 使用場(chǎng)景及替代 useState
useReducer 是 React 提供的狀態(tài)管理 Hook，適合處理復(fù)雜狀態(tài)邏輯。很多場(chǎng)景用 useState 能寫，但隨著狀態(tài)增多、更新規(guī)則復(fù)雜，代碼會(huì)變亂，這時(shí)候 useReducer 更適合。
一、useReducer 基礎(chǔ)概念
語法：
const [state, dispatch] = useReducer(reducer, initialState);
參數(shù)：
- state：當(dāng)前狀態(tài)
- dispatch(action)：觸發(fā)更新
- reducer：狀態(tài)處理函數(shù)
- initialState：初始值
類似 Redux：
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, {
count: 0
});
return (
<>
<p>{state.count}</p>
<button
onClick={() =>
dispatch({ type: 'increment' })
}
>
+
</button>
<button
onClick={() =>
dispatch({ type: 'decrement' })
}
>
-
</button>
</>
);
}二、什么時(shí)候useState不夠用了？
場(chǎng)景1：多個(gè)相關(guān)狀態(tài)一起維護(hù)（推薦 useReducer）
useState 寫法
例如登錄表單：
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');提交：
setLoading(true);
api.login()
.then(() => {
setLoading(false);
})
.catch(() => {
setError('失敗');
setLoading(false);
});狀態(tài)多時(shí)：
username
password
loading
error
success
token
userInfo
會(huì)越來越亂。
useReducer：
const initialState = {
username: '',
password: '',
loading: false,
error: ''
};
function reducer(state, action) {
switch (action.type) {
case 'SET_USERNAME':
return {
...state,
username: action.payload
};
case 'LOGIN_START':
return {
...state,
loading: true
};
case 'LOGIN_FAIL':
return {
...state,
loading: false,
error: action.payload
};
default:
return state;
}
}
const [state, dispatch] =
useReducer(reducer, initialState);更新：
dispatch({
type: 'SET_USERNAME',
payload: '張三'
});邏輯集中。
適合：
? 表單
? 登錄流程
? 搜索篩選條件
? 彈窗狀態(tài)
場(chǎng)景2：狀態(tài)之間有關(guān)聯(lián)
例如購物車：
狀態(tài)：
商品數(shù)量
總價(jià)
優(yōu)惠金額
是否可提交
如果：
setCount() setPrice() setDiscount() setCanSubmit()
可能出現(xiàn)更新不同步。
用 reducer：
function reducer(state, action) {
switch(action.type){
case 'ADD_PRODUCT':
const count =
state.count + 1;
return {
count,
total:
count * state.price,
canSubmit:
count > 0
}
}
}一次更新全部狀態(tài)。
適合：
購物車
訂單
配置面板
步驟流
場(chǎng)景3：狀態(tài)更新邏輯復(fù)雜
例如：
性能平臺(tái)篩選條件：
云廠商
CPU架構(gòu)
規(guī)格
產(chǎn)品代際
核數(shù)
自動(dòng)聯(lián)動(dòng)
你之前做過類似：
選擇 CPU → 自動(dòng)填規(guī)格 → 自動(dòng)填云廠商
多個(gè)接口聯(lián)動(dòng)：
選擇規(guī)格
↓
請(qǐng)求接口
↓
更新5個(gè)狀態(tài)
↓
重置表單
這類就適合 reducer：
dispatch({
type:'UPDATE_FILTER',
payload:data
})統(tǒng)一管理。
場(chǎng)景4：狀態(tài)機(jī)（步驟流）
例如：
上傳文件：
idle
uploading
success
error
useReducer：
function reducer(state, action) {
switch(action.type){
case 'UPLOAD':
return {
status:'loading'
}
case 'SUCCESS':
return {
status:'success'
}
case 'FAIL':
return {
status:'error'
}
}
}比：
loading
success
error
多個(gè) bool 更清晰。
適合：
上傳
支付
審批流
登錄
任務(wù)執(zhí)行
場(chǎng)景5：多人協(xié)作，希望邏輯統(tǒng)一
useState
更新散落：
setA() setB() setC()
難找。
useReducer
統(tǒng)一：
dispatch({
type:'UPDATE_USER'
})所有更新都進(jìn) reducer。
維護(hù)成本低。
三、什么時(shí)候不要用 useReducer？
簡(jiǎn)單狀態(tài)：
const [visible, setVisible] const [count, setCount] const [name, setName]
沒必要：
useReducer()
會(huì)增加復(fù)雜度。
建議：
| 狀態(tài)復(fù)雜度 | 推薦 |
|---|---|
| 1~2 個(gè)簡(jiǎn)單狀態(tài) | useState |
| 多個(gè)相關(guān)狀態(tài) | useReducer |
| 狀態(tài)聯(lián)動(dòng) | useReducer |
| 復(fù)雜業(yè)務(wù)流程 | useReducer |
| 狀態(tài)機(jī) | useReducer |
| 大型組件 | useReducer |
| 全局狀態(tài) | useReducer + Context |
四、和 Redux 區(qū)別
很多人第一次看到：
dispatch() reducer() action.type
以為 Redux。
其實(shí)：
Redux：
全局狀態(tài)
所有組件共享
useReducer：
組件內(nèi)部狀態(tài)
局部狀態(tài)管理
組合使用：
Context + useReducer
≈ 簡(jiǎn)化版 Redux
適合中小項(xiàng)目。
可以記一句經(jīng)驗(yàn)：
useState 管“值”，useReducer 管“狀態(tài)變化規(guī)則”。
當(dāng)你發(fā)現(xiàn)組件里出現(xiàn)很多：
setA() setB() setC() setD()
或者多個(gè)狀態(tài)互相影響時(shí)，就可以考慮換 useReducer。這在你做性能平臺(tái)那種“篩選條件聯(lián)動(dòng) + 接口回填”的頁面，會(huì)比多個(gè) useState 更容易維護(hù)。
到此這篇關(guān)于react的 useReducer 使用場(chǎng)景及替代 useState的文章就介紹到這了,更多相關(guān)react useReducer 使用場(chǎng)景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你對(duì)這些問題還不是很明白，那么可以在這篇文章中找到答案2022-11-11
react中antd Upload手動(dòng)上傳的示例
本文主要介紹了react中antd Upload手動(dòng)上傳的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
React中處理表單數(shù)據(jù)實(shí)現(xiàn)方式
本文介紹了如何在React中處理表單數(shù)據(jù),包括控制組件和非控制組件的使用,通過控制組件,表單的輸入值由React組件的狀態(tài)控制；非控制組件通過ref來訪問表單輸入的當(dāng)前值,文章還展示了如何處理多個(gè)輸入和添加驗(yàn)證和樣式,以提供更好的用戶體驗(yàn)2025-02-02
這篇文章主要介紹了Vite?+?React?如何從0到1搭建一個(gè)開源組件庫，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了React?保留和重置State實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本篇文章主要介紹了React中的refs的使用教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
React前端實(shí)現(xiàn)將Word(Doc/Docx)轉(zhuǎn)HTML
隨著在線內(nèi)容生產(chǎn)需求的持續(xù)增長,轉(zhuǎn)換Word文檔到HTML格式已成為核心需求之一,本文將從環(huán)境配置、核心邏輯實(shí)現(xiàn)、導(dǎo)出參數(shù)定制三個(gè)維度詳細(xì)介紹React的實(shí)現(xiàn)方案,希望對(duì)大家有所幫助2025-11-11
react-intl實(shí)現(xiàn)React國際化多語言的方法
這篇文章主要介紹了react-intl實(shí)現(xiàn)React國際化多語言的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程
這篇文章主要介紹了React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09