一文帶你搞懂React中的useReducer

更新時間：2023年06月16日 09:44:49 作者：何遇er

useReducer 是除useState之外另一個與狀態(tài)管理相關(guān)的 hook，這篇文章主要為大家介紹了useReducer應用的相關(guān)知識，感興趣的小伙伴可以跟隨小編一起學習一下

useReducer 的類型定義

useReducer 的類型定義如下：

function useReducer<R extends ReducerWithoutAction<any>, I>(
    reducer: R,
    initializerArg: I,
    initializer: (arg: I) => ReducerStateWithoutAction<R>
): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
function useReducer<R extends ReducerWithoutAction<any>>(
    reducer: R,
    initializerArg: ReducerStateWithoutAction<R>,
    initializer?: undefined
): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
function useReducer<R extends Reducer<any, any>, I>(
    reducer: R,
    initializerArg: I & ReducerState<R>,
    initializer: (arg: I & ReducerState<R>) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];
function useReducer<R extends Reducer<any, any>, I>(
    reducer: R,
    initializerArg: I,
    initializer: (arg: I) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];
function useReducer<R extends Reducer<any, any>>(
    reducer: R,
    initialState: ReducerState<R>,
    initializer?: undefined
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

useReducer 的類型定義很復雜，一共有 5 個重載，總體而言，它最多接受3個參數(shù)，第 1 個參數(shù)是一個用于更新狀態(tài)的函數(shù)，之后將它稱為 reducer。第 3 個參數(shù)非必填，如果不存在第 3 個參數(shù)，那么第 2 個參數(shù)將作為狀態(tài)的初始值；如果存在第 3 個參數(shù)，那么它必須是函數(shù)，此時第 2 個參數(shù)被傳遞給該函數(shù)用于計算狀態(tài)的初始值，該函數(shù)只在組件初始渲染時執(zhí)行一次。useReducer 的返回值是一個長度為 2 的數(shù)組，數(shù)組的第 1 個位置是狀態(tài)值，第 2 個位置是一個用于觸發(fā)狀態(tài)更新的函數(shù)，將它記為dispatch，調(diào)用 dispatch 將導致 reducer 被調(diào)用。接下來通過計數(shù)器 demo 對比 useState 和useReducer 用法上的差異。

用 useState 實現(xiàn)計數(shù)器

用 useState 實現(xiàn)計數(shù)器，代碼如下：

function UseStateCounterDemo() {
    const [value, setValue] = useState<number>(0)
    const [step, setStep] = useState<number>(1)
    const onChangeStep = (ev: React.ChangeEvent<HTMLInputElement>) => {
        setStep(Number(ev.target.value))
    }
    return (
        <div>
            <h2>用useState實現(xiàn)計數(shù)器</h2>
            count: {count}; 
            step: <input type='number' value={step} onChange={onChangeStep}/>
            <button onClick={() => setValue(value + step)}>加</button>
            <button onClick={() => setValue(value - step)}>減</button>
            <button onClick={() => {setValue(0); setStep(1)}}>重置</button>
        </div>
    )
}

上述代碼很簡單，它使用 useState 定義了兩個狀態(tài)，分別表示計數(shù)器的值和加減步數(shù)，在過去的文章里已對 useState 做過詳細的介紹，這里不再贅述，下面詳細介紹用 useReducer 實現(xiàn)計數(shù)器。

用 useReducer 實現(xiàn)計數(shù)器

定義 reducer

使用 useReducer hook 離不開reducer，它是一個函數(shù)，用于更新 useReducer 返回的狀態(tài)，代碼如下：

const initArg: Counter = {value: 0, step: 1}
// 它用于更新state
function reducer(prevState: Counter, action: Action): Counter  {
    switch (action.type) {
        case 'increment':
            return {
                ...prevState,
                value: prevState.value + prevState.step
            }
        case 'decrement':
            return {
                ...prevState,
                value: prevState.value - prevState.step
            }
        case 'reset':
            return initArg
        case 'changeStep':
            return {
                ...prevState,
                step: action.value || initArg.value
            }
        default:
            throw new Error();
    }
}

reducer 用于更新狀態(tài)，計數(shù)器 demo 有兩個狀態(tài)，分別是計數(shù)器的當前值和它的加減步數(shù)，這兩個狀態(tài)密切相關(guān)，這里用一個 TS 接口去描述它，代碼如下：

interface Counter {
   // 計數(shù)器的當前值
    value: number
   // 計數(shù)器的加減步數(shù)
    step: number
}

計數(shù)器有 3 種操作，分別是加、減、重置和修改步數(shù)，這里用 TS 接口描述這些行為，代碼如下：

interface Action {
    type: 'increment' | 'decrement' | 'reset'|'changeStep',
    value?: number
}

在組件中使用 useReducer

// 計數(shù)器的初始值
const initArg: Counter = {value: 0, step: 1}
function UseReducerCounterDemo() {
    // 使用上一步定義 reducer
    const [counter, dispatch] = useReducer(reducer, initArg)
    const onChangeStep = (ev: React.ChangeEvent<HTMLInputElement>) => {
        dispatch({type: 'changeStep',value: Number(ev.target.value)})
    }
    return (
        <div>
            <h2>用useReducer實現(xiàn)計數(shù)器</h2>
            count: {counter.value}; 
            step: <input type='number' value={counter.step} onChange={onChangeStep}/>
            <button onClick={() => dispatch({type: 'increment'})}>加</button>
            <button onClick={() => dispatch({type: 'decrement'})}>減</button>
            <button onClick={() => dispatch({type: 'reset'})}>重置</button>
        </div>
    )
}

只考慮代碼量，讀者應該都會認為useState比useReducer更簡潔。仔細觀察可以發(fā)現(xiàn)，上述計數(shù)器除了有value還有step，step對value有影響，UseStateCounterDemo組件將它們零散地保存在不同的狀態(tài)中，UseStateCounterDemo組件將它們關(guān)聯(lián)在同一個狀態(tài)中，內(nèi)聚性更高。useState與useReducer沒有優(yōu)劣之外，它們有各自適用的場景，這里有如下建議：

1.當狀態(tài)是一個擁有很多屬性的復雜對象，并且狀態(tài)更新涉及復雜的邏輯時，推薦使用useReducer。

2.當某個狀態(tài)的更新受另一個狀態(tài)影響時，推薦使用 useReducer將它們放在一起。

3.當狀態(tài)只是單獨的基本數(shù)據(jù)類型時，推薦使用 useState。

在介紹 useEffect時曾強調(diào)，為了在 effect 中拿到狀態(tài)最新的值，必須給 effect 設置正確地依賴項。在 useEffect 中使用 useReducer 返回的 dispatch 能讓 effect 自給自足，減少依賴項。示例代碼如下：

function DispatchDemo(props: {step: number}) {
    function reducer(value: number) {
	// 始終能訪問到最新的 step 
        return props.step + value
    }
    const [value, dispatch] = useReducer(reducer, 0)
    useEffect(() => {
        document.body.addEventListener('click', dispatch)
        return () => {
            document.body.removeEventListener('click', dispatch)
        }
    }, [])
    return // todo
}

上述代碼 useEffect 的第二個參數(shù)為空數(shù)組，這意味著 effect 只在組件初始渲染時執(zhí)行。由于React 會讓 dispatch 在組件的每次渲染中保持唯一的引用，所以 dispatch 不必出現(xiàn)在effect的依賴中，此特性與 ref 類似。雖然 dispatch 的引用保持不變，但它能調(diào)用組件本次渲染時的reducer，在 reducer 作用域?qū)⒌玫阶钚碌?state 和 props。