概念

useReducer

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

使用方式:

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

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

dispatch({type: 'increment'})  

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

例子:計數(shù)器

// 定義 reducer 函數(shù)，接受當(dāng)前狀態(tài)和操作（action），返回新狀態(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}
}// 計數(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>  )
}

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

useContext

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

import React, { createContext, useContext, useState } from 'react';// 創(chuàng)建一個上下文對象
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 鉤子來訪問上下文中的數(shù)據(jù)const theme = useContext(ThemeContext);return (<header style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>Header Content</header>);
}function Main() {// 使用 useContext 鉤子來訪問上下文中的數(shù)據(jù)const theme = useContext(ThemeContext);return (<main style={{ color: theme === 'dark' ? 'white' : 'black' }}>Main Content</main>);
}export default App;

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

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

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

useReducer+createContext例子

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

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

import React, { createContext, useReducer, useContext } from 'react';// 創(chuàng)建一個初始狀態(tài)
const initialState = {count: 0,
};// 創(chuàng)建一個 reducer 函數(shù)來處理狀態(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 用于訪問上下文
export function useAppContext() {return useContext(AppContext);
}

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

接下來，就可以在應(yīng)用中使用這個上下文和狀態(tài)管理器。這是一個示例組件，演示如何使用全局狀態(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;

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

最后，在應(yīng)用的根組件中使用 AppProvider，以使全局狀態(tài)在整個應(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 確實可以在一些場景下替代 Redux，但并不能真正的取代，只是某些場景可以不用redux。在選擇使用哪個的時候先根據(jù)自己習(xí)慣和項目需要。
例如：

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

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

2. 中間件需求

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

3. 調(diào)試體驗

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

4. TypeScript 集成

Redux 對 TypeScript 支持更友好。

5. 項目規(guī)模

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

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