概念

useReducer

useReducer 是 React 提供的一個(gè)狀態(tài)管理鉤子，通常用于管理組件的復(fù)雜狀態(tài)邏輯。它采用兩個(gè)參數(shù)：reducer 函數(shù)和初始狀態(tài)。Reducer 函數(shù)接受當(dāng)前狀態(tài)和一個(gè)操作（action），并返回一個(gè)新的狀態(tài)。這有點(diǎn)類似于 Redux 中的 reducer 函數(shù)。使用 useReducer 可以更清晰地管理組件的狀態(tài)更新邏輯，特別適用于處理多個(gè)相關(guān)狀態(tài)或者需要執(zhí)行復(fù)雜計(jì)算的情況。在某些場(chǎng)景下可以作為 useState 的替代方案。

使用方式:

const [state, dispatch] = useReducer(reducer, initialState) 

它返回當(dāng)前的狀態(tài)state,和dispatch方法。當(dāng)我們需要改變狀態(tài)時(shí),調(diào)用dispatch方法:

dispatch({type: 'increment'})  

這會(huì)觸發(fā)reducer函數(shù),返回新的狀態(tài)值。

例子:計(jì)數(shù)器

// 定義 reducer 函數(shù)，接受當(dāng)前狀態(tài)和操作（action），返回新?tīng)顟B(tài)
const counterReducer = (state, action) => {switch(action.type) {case 'increment': return {count: state.count + 1}case 'decrement':return {count: state.count - 1}  default:return state}
}// 計(jì)數(shù)器函數(shù)
function Counter() {
// 使用 useReducer 鉤子，傳入 reducer 函數(shù)和初始狀態(tài)const [state, dispatch] = useReducer(counterReducer, {count: 0})return (<div><button onClick={() => dispatch({type: 'increment'})}>+</button><span>{state.count}</span><button onClick={() => dispatch({type: 'decrement'})}>-</button></div>  )
}

這樣通過(guò)useReducer可以抽離狀態(tài)管理邏輯,使組件更加清晰。

useContext

useContext 是 React 提供的一個(gè)鉤子，用于在函數(shù)組件中訪問(wèn)上下文（context）中的數(shù)據(jù)。上下文是一種跨組件樹(shù)傳遞數(shù)據(jù)的方式，它可以避免通過(guò)中間組件的 props 一層層傳遞狀態(tài)的麻煩。，特別適用于共享全局狀態(tài)或應(yīng)用程序范圍的配置信息。
這里舉個(gè)全局主題色的例子

import React, { createContext, useContext, useState } from 'react';// 創(chuàng)建一個(gè)上下文對(duì)象
const ThemeContext = createContext();function App() {const [theme, setTheme] = useState('light');return (// 使用 ThemeContext.Provider 提供數(shù)據(jù)<ThemeContext.Provider value={theme}><div><Header /><Main /></div><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button></ThemeContext.Provider>);
}function Header() {// 使用 useContext 鉤子來(lái)訪問(wèn)上下文中的數(shù)據(jù)const theme = useContext(ThemeContext);return (<header style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>Header Content</header>);
}function Main() {// 使用 useContext 鉤子來(lái)訪問(wèn)上下文中的數(shù)據(jù)const theme = useContext(ThemeContext);return (<main style={{ color: theme === 'dark' ? 'white' : 'black' }}>Main Content</main>);
}export default App;

在這個(gè)示例中，創(chuàng)建了一個(gè) ThemeContext 上下文對(duì)象，然后在 App 組件中使用 ThemeContext.Provider 提供了一個(gè)名為 theme 的數(shù)據(jù)。這個(gè)數(shù)據(jù)代表當(dāng)前的主題。

在 Header 和 Main 組件中，我們使用 useContext 鉤子來(lái)訪問(wèn) ThemeContext 上下文中的 theme 數(shù)據(jù)。這使得這兩個(gè)組件可以獲取到 theme 數(shù)據(jù)，無(wú)需通過(guò) props 一級(jí)一級(jí)傳遞，而且當(dāng)主題變化時(shí)，這兩個(gè)組件會(huì)自動(dòng)更新。

最后，App 組件中的 “Toggle Theme” 按鈕允許我們?cè)跍\色主題和深色主題之間切換，因?yàn)?theme 狀態(tài)是在 App 組件中管理的，而通過(guò)上下文傳遞給了 Header 和 Main 組件。

useReducer+createContext例子

使用 React 的 useReducer 和 Context 是一種強(qiáng)大的方式來(lái)管理應(yīng)用的全局狀態(tài)，特別是當(dāng)需要在多個(gè)組件之間共享狀態(tài)時(shí)。避免了組件間層層傳遞的props，有更清晰的狀態(tài)管理，useReducer 抽取狀態(tài)邏輯,狀態(tài)改變更可預(yù)測(cè)。context 將狀態(tài)提取到組件樹(shù)外,與業(yè)務(wù)邏輯解耦。
下面是一個(gè)基本示例，展示如何使用這兩個(gè)特性來(lái)擴(kuò)展你的應(yīng)用。

首先，創(chuàng)建一個(gè)全局的狀態(tài)管理器和上下文。這個(gè)上下文將包含狀態(tài)以及狀態(tài)更新的函數(shù)：

import React, { createContext, useReducer, useContext } from 'react';// 創(chuàng)建一個(gè)初始狀態(tài)
const initialState = {count: 0,
};// 創(chuàng)建一個(gè) reducer 函數(shù)來(lái)處理狀態(tài)更新
function reducer(state, action) {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 };case 'DECREMENT':return { count: state.count - 1 };default:return state;}
}// 創(chuàng)建上下文
const AppContext = createContext();// 創(chuàng)建上下文的 Provider 組件
export function AppProvider({ children }) {const [state, dispatch] = useReducer(reducer, initialState);return (<AppContext.Provider value={{ state, dispatch }}>{children}</AppContext.Provider>);
}// 自定義 hook 用于訪問(wèn)上下文
export function useAppContext() {return useContext(AppContext);
}

在上面的代碼中，創(chuàng)建了一個(gè)狀態(tài)管理器，包含了一個(gè)狀態(tài)對(duì)象和一個(gè) reducer 函數(shù)，以處理狀態(tài)的更新。然后，使用 createContext 創(chuàng)建了一個(gè)上下文，并創(chuàng)建了一個(gè)名為 AppProvider 的組件，它將狀態(tài)和 dispatch 函數(shù)提供給上下文。最后，創(chuàng)建了一個(gè)自定義 hook useAppContext，用于訪問(wèn)上下文。

接下來(lái)，就可以在應(yīng)用中使用這個(gè)上下文和狀態(tài)管理器。這是一個(gè)示例組件，演示如何使用全局狀態(tài)：

import React from 'react';
import { useAppContext } from './AppContext';function Counter() {const { state, dispatch } = useAppContext();return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button><button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button></div>);
}function App() {return (<div><h1>My App</h1><Counter /></div>);
}export default App;

在這個(gè)示例中，導(dǎo)入了 useAppContext 鉤子，然后在 Counter 組件中使用它來(lái)獲取全局狀態(tài)和 dispatch 函數(shù)。Counter 組件能夠訪問(wèn)全局狀態(tài)并觸發(fā)狀態(tài)的更新，這將反映在整個(gè)應(yīng)用中。

最后，在應(yīng)用的根組件中使用 AppProvider，以使全局狀態(tài)在整個(gè)應(yīng)用中可用：

import React from 'react';
import { AppProvider } from './AppContext';
import App from './App';function Root() {return (<AppProvider><App /></AppProvider>);
}export default Root;

總結(jié)

useReducer + createContext 確實(shí)可以在一些場(chǎng)景下替代 Redux，但并不能真正的取代，只是某些場(chǎng)景可以不用redux。在選擇使用哪個(gè)的時(shí)候先根據(jù)自己習(xí)慣和項(xiàng)目需要。
例如：

1. 狀態(tài)管理復(fù)雜度

如果狀態(tài)邏輯非常復(fù)雜,多組件共享、包含大量業(yè)務(wù)邏輯,Redux 的集中式狀態(tài)管理仍很有必要。useReducer + createContext 適合中小規(guī)模狀態(tài)管理。

2. 中間件需求

Redux 的強(qiáng)大中間件(如 Redux Thunk、Saga)可以解決更多場(chǎng)景,useReducer 的中間件支持較弱。

3. 調(diào)試體驗(yàn)

Redux Devtools 提供了更好的調(diào)試體驗(yàn)。useReducer 需要自行實(shí)現(xiàn)。

4. TypeScript 集成

Redux 對(duì) TypeScript 支持更友好。

5. 項(xiàng)目規(guī)模

在大項(xiàng)目中,Redux 的結(jié)構(gòu)性和可預(yù)測(cè)性做得更好。

所以,是使用 Redux還是HOOKS，還是需要看團(tuán)隊(duì)規(guī)模、項(xiàng)目復(fù)雜度等具體情況。但在一些中小型項(xiàng)目中,useReducer + createContext 可以作為一個(gè)簡(jiǎn)單有效的狀態(tài)管理方案。