带你手写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.memouseMemo)。

二、Reducer 的核心概念

1. Reducer 函数

Reducer 是一个纯函数,接收两个参数:

  • state:当前状态。
  • action:描述状态变化的动作(包含 typepayload)。
c 复制代码
	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:

c 复制代码
	const [state, dispatch] = useReducer(reducer, initialState);
  • state:当前状态。
  • dispatch:触发状态更新的函数(发送 action)。

三,手写react中的useReducer

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

c 复制代码
// 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

c 复制代码
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模式构建可维护的状态管理方案。

相关推荐
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one3 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830945 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
汇能感知5 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun5 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao5 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习