带你手写React中的useReducer函数。(底层实现)

---

前言

在 React 开发中，useReducer 是管理复杂状态逻辑的利器。它类似于 Redux 的简化版，允许我们将状态更新逻辑抽离为独立的 reducer 函数，提升代码的可读性和可维护性。本文将深入探讨手写 React 中的 Reducer，从原理到实践，帮助你彻底掌握这一核心概念。

一、为什么需要 Reducer？

1. 状态逻辑集中化：将状态更新逻辑从组件中抽离，避免状态更新逻辑分散。
2. 可预测性：通过纯函数（Reducer）处理状态，确保状态变化可追踪。
3. 复杂状态管理：适合处理嵌套对象或数组等复杂状态。
4. 性能优化：减少不必要的渲染（结合 React.memo 或 useMemo）。

二、Reducer 的核心概念

1. Reducer 函数

Reducer 是一个纯函数，接收两个参数：

• state：当前状态。
• action：描述状态变化的动作（包含 type 和 payload）。

	type State = { count: number };type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };const reducer = (state: State, action: Action): State => {switch (action.type) {case 'INCREMENT':return { count: state.count + 1 };case 'DECREMENT':return { count: state.count - 1 };default:throw new Error('未知 action 类型');}};

2. useReducer 钩子

React 提供的 useReducer 钩子用于在组件中使用 Reducer：

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

• state：当前状态。
• dispatch：触发状态更新的函数（发送 action）。

三，手写react中的useReducer

reducer中的dispatch触发就是在setState（更新我们传入的reducer返回的最新状态值）

// useReducer 分贝要传入一个reducder函数和初始数据
import { useState } from "react";
export function useReducer<T, D>(reducer: (state: T, action: D) => T,initialState: T
) {const [state, setState] = useState(initialState);const dispatch = (action: D) => {setState(reducer(state, action));};return [state, dispatch] as const;
}

使用示例：
结合了useContext

import type { IConfig } from "../data/data";
import { useReducer } from "./utils/reducer/myReducer";interface Action {type: "set" | "get";key: keyof IConfig;value: string;
}// 我们的具体逻辑实现const configReducer = (state: IConfig, action: Action) => {switch (action.type) {case "get":return state;case "set":return { ...state, [action.key]: action.value };default:return state;}
};type IConfig = typeof data;const data = {title: "小路",content: "小玛丽，小马路，小玛丽，小马路",
};const App = () => {// 使用我们自己的useReducerconst [config, dispatch] = useReducer(configReducer, data);return (<div><ConfigContext value={{ config, dispatch }}><ToodList /></ConfigContext></div>);
};export default App;

总结

本文深入解析React中的useReducer原理与实践，从状态管理需求出发，阐述Reducer的核心优势：逻辑集中化、状态可预测性及复杂状态处理能力。通过代码示例演示Reducer纯函数结构（接收state/action参数）和useReducer钩子用法，并重点实现自定义useReducer：利用useState存储状态，通过dispatch触发更新。文章结合useContext展示完整应用场景，呈现如何用Reducer模式构建可维护的状态管理方案。（149字）