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

文章目录

• 前言
• • [一、为什么需要 Reducer？](#一、为什么需要 Reducer？)
  • [二、Reducer 的核心概念](#二、Reducer 的核心概念)
  • • [1. Reducer 函数](#1. Reducer 函数)
    • [2. useReducer 钩子](#2. useReducer 钩子)
  • 三，手写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 = () => {
  // 使用我们自己的useReducer
  const [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模式构建可维护的状态管理方案。