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