当前位置：首页 > news >正文

createContext+useContext+useReducer组合管理React复杂状态

news 来源：原创 2025/8/25 20:59:07

`createContext`、`useContext` 和 `useReducer` 的组合是 React 中管理全局状态的一种常见模式。这种模式非常适合在不引入第三方状态管理库（如 Redux）的情况下，管理复杂的全局状态。

以下是一个经典的例子，展示如何使用 createContext、useContext 和 useReducer 来实现一个简单的全局状态管理。

示例：Todo 应用

我们将实现一个简单的 Todo 应用，支持以下功能：

添加任务
删除任务
切换任务完成状态

1. 定义全局状态和操作

TodoContext.tsx

import React, { createContext, useReducer, useContext, ReactNode } from 'react';// 定义 Todo 项的类型
interface Todo {id: number;text: string;completed: boolean;
}// 定义全局状态的类型
interface TodoState {todos: Todo[];
}// 定义操作类型
type TodoAction =| { type: 'ADD_TODO'; payload: string }| { type: 'TOGGLE_TODO'; payload: number }| { type: 'DELETE_TODO'; payload: number };// 定义初始状态
const initialState: TodoState = {todos: [],
};// 定义 reducer 函数
const todoReducer = (state: TodoState, action: TodoAction): TodoState => {switch (action.type) {case 'ADD_TODO':return {...state,todos: [...state.todos,{ id: Date.now(), text: action.payload, completed: false },],};case 'TOGGLE_TODO':return {...state,todos: state.todos.map((todo) =>todo.id === action.payload? { ...todo, completed: !todo.completed }: todo),};case 'DELETE_TODO':return {...state,todos: state.todos.filter((todo) => todo.id !== action.payload),};default:return state;}
};// 创建 Context
const TodoContext = createContext<{state: TodoState;dispatch: React.Dispatch<TodoAction>;
} | null>(null);// 创建 Provider 组件
export const TodoProvider = ({ children }: { children: ReactNode }) => {const [state, dispatch] = useReducer(todoReducer, initialState);return (<TodoContext.Provider value={{ state, dispatch }}>{children}</TodoContext.Provider>);
};// 自定义 Hook，用于使用 TodoContext
export const useTodoContext = () => {const context = useContext(TodoContext);if (!context) {throw new Error('useTodoContext must be used within a TodoProvider');}return context;
};

2. 使用全局状态

App.tsx

import React, { useState } from 'react';
import { TodoProvider, useTodoContext } from './TodoContext';const TodoList = () => {const { state, dispatch } = useTodoContext();return (<div><h2>Todo List</h2><ul>{state.todos.map((todo) => (<li key={todo.id}><spanstyle={{textDecoration: todo.completed ? 'line-through' : 'none',cursor: 'pointer',}}onClick={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}>{todo.text}</span><button onClick={() => dispatch({ type: 'DELETE_TODO', payload: todo.id })}>Delete</button></li>))}</ul></div>);
};const AddTodo = () => {const { dispatch } = useTodoContext();const [text, setText] = useState('');const handleAddTodo = () => {if (text.trim()) {dispatch({ type: 'ADD_TODO', payload: text });setText('');}};return (<div><inputtype="text"value={text}onChange={(e) => setText(e.target.value)}placeholder="Add a new task"/><button onClick={handleAddTodo}>Add</button></div>);
};const App = () => {return (<TodoProvider><h1>Todo App</h1><AddTodo /><TodoList /></TodoProvider>);
};export default App;

3. 代码解释

TodoContext:
- 使用 createContext 创建一个全局状态的上下文。
- 使用 useReducer 管理全局状态和操作。
TodoProvider:
- 包裹应用的根组件，提供全局状态和 dispatch 方法。
useTodoContext:
- 自定义 Hook，用于简化 useContext 的使用，并确保上下文只能在 TodoProvider 内部使用。
todoReducer:
- 定义了如何根据不同的操作（ADD_TODO、TOGGLE_TODO、DELETE_TODO）更新全局状态。
组件分离:
- AddTodo 组件负责添加任务。
- TodoList 组件负责显示任务列表，并支持切换任务状态和删除任务。

4. 优势

清晰的状态管理：
- 使用 useReducer 将状态更新逻辑集中在一个地方，便于维护和扩展。
全局状态共享：
- 使用 createContext 和 useContext 实现全局状态共享，无需手动传递 props。
组件解耦：
- 通过上下文和 dispatch，各组件可以独立处理自己的逻辑，而无需直接依赖其他组件。

5. 总结

createContext + useContext + useReducer 是一种轻量级的全局状态管理方案，适合中小型项目。它的核心思想是：

使用 createContext 提供全局状态。
使用 useReducer 管理状态更新逻辑。
使用 useContext 在组件中访问和操作全局状态。

这种模式简单易用，且不需要引入额外的状态管理库，非常适合 React 项目中需要共享状态的场景。

createContext+useContext+useReducer组合管理React复杂状态

createContext、useContext 和 useReducer 的组合是 React 中管理全局状态的一种常见模式。这种模式非常适合在不引入第三方状态管理库（如 Redux）的情况下，管理复杂的全局状态。以下是一个经典的例子，展示如何使用 createContex…...

编程日记 2025/8/25 20:59:07

海外直播平台交互设计师简历模板

营销团队管理技巧培训PPT啊，其实是一个非常有用的工具呢！它不仅能帮助管理者梳理思路，还能让团队成员快速掌握关键技能。说实话，一个好的PPT就像一位优秀的导师，在会议室里就能让人眼前一亮！比如有一次我参…...

编程日记 2025/8/25 20:57:35

基于springboot微信小程序课堂签到及提问系统(源码+lw+部署文档+讲解)，源码可白嫖!

摘要随着信息时代的来临，过去的课堂签到及提问管理方式的缺点逐渐暴露，本次对过去的课堂签到及提问管理方式的缺点进行分析，采取计算机方式构建基于微信小程序的课堂签到及提问系统。本文通过阅读相关文献，研究国内外相关技术&a…...

编程日记 2025/8/21 6:41:42

MCU软件开发使用指针有哪些坑？

目录 1、空指针访问 2、野指针（未初始化的指针） 3、指针越界 4、内存泄漏 5、悬空指针 6、指针类型不匹配 7、多任务环境中的指针访问 8、对齐问题在MCU软件开发中，使用指针虽然可以提高程序的灵活性和性能，但也存在许多…...

编程日记 2025/8/20 19:44:35

ubuntu 20.04 编译和运行SC-LeGo-LOAM

1.搭建文件目录和clone代码 mkdir -p SC-LeGo-LOAM/src cd SC-LeGo-LOAM/src git clone https://github.com/AbangLZU/SC-LeGO-LOAM.git cd .. 2.修改代码需要注意的是原作者使用的是Ouster OS-64雷达，需要更改utility.h文件中适配自己的雷达类型，而…...

编程日记 2025/8/22 17:19:52

FPGA_DDR(一) 仿真

对ddr进行读写实验，用了vivado的ddr的模型进行仿真 1 创建AXI_mig的ip核选择axi 选择自己的型号，这里是ddr的位宽32，但是axi的话是256位宽选择nobuffer，没有缓冲器选择自己匹配引脚默认后面默认即可生成ip，时间…...

编程日记 2025/8/22 12:34:55

【Spec2MP：项目管理之项目人力管理】

芯片设计项目中如何打造战斗力强悍的团队？ 引言：芯片设计项目的核心是人芯片设计是一项高度复杂、跨学科协作的工程，团队的专业性、协作效率和凝聚力直接影响项目成败。本文结合某芯片项目人力管理文档，从目标、职责、价值观、架…...

编程日记 2025/8/23 10:49:01

windows10下PointNet官方代码Pytorch实现

PointNet模型运行 1.下载源码并安装环境 GitCode - 全球开发者的开源社区,开源代码托管平台GitCode是面向全球开发者的开源社区,包括原创博客,开源代码托管,代码协作,项目管理等。与开发者社区互动,提升您的研发效率和质量。https://gitcode.com/gh_mirrors/po/pointnet.pyto…...

编程日记 2025/8/21 2:41:31

阿里云大模型训练与推理开发

本文主要描述阿里云大模型开发环境的搭建、训练数据集的制作流程、大模型如何训练数据集以及如何利用已训练完成的模型执行推理。开发环境搭建 ModelScope社区是阿里云通义千问开源的大模型开发者社区。如上所示，安装ModelScope社区大模型基础库开发框架的命令行…...

编程日记 2025/8/21 12:15:45

图灵逆向——题一-动态数据采集

目录列表过程分析代码实现过程分析第一题比较简单，直接抓包即可，没有任何反爬（好像头都不用加。。。） 代码实现答案代码如下： """ -*- coding: utf-8 -*- File : .py author : 鲨鱼爱兜兜 T…...

编程日记 2025/8/22 16:26:57

GS069W电动工具直流调速电路深度解析

产品概述 GS069W是我们推出的CMOS专用调速集成电路，采用SOP8封装，内置15V稳压结构，具有宽电压输入（4-24V）、低功耗、强抗干扰等特点，专为电动工具调速设计。核心参数工作电压：4-24V&#xff…...

编程日记 2025/8/20 19:47:16

PyQt6实例_A股日数据维护工具_下载某个股票未复权数据

目录前置： 相关代码： 1 工作类 2 数据库交互 3 主界面调用视频前置： 1 本系列将以 “PyQt6实例_A股日数据维护工具” 开头放置在“PyQt6实例”专栏 2 日数据可在“数据库”专栏，“PostgreSQL_”开头系列博文中获取 3 权…...

编程日记 2025/8/22 19:47:22

【蓝桥杯】算法笔记6

1. 可行性剪枝应用 1.1. 题目题目描述：给定一个正整数n和一个正整数目标值target，以及一个由不同正整数组成的数组nums。要求从nums中选出若干个数，每个数可以被选多次，使得这些数的和恰好等于target。问有多少种不同的组合方式？输入：第一行：n和target，表示数组…...

编程日记 2025/8/19 18:24:53

C++ 中日期类的输入输出操作符重载实践

目录引言预备知识输出流操作符 operator<< 重载为什么要返回 ostream& 输入流操作符 operator>> 重载实现思路测试代码总结引言在 C 编程中，当我们自定义数据类型时，为了让其能像内置类型一样方便地进行输入输出操…...

编程日记 2025/8/23 22:35:50

图论：最小生成树

最小生成树 （无向无环图） 概念 1.Prim算法 P3366 【模板】最小生成树 - 洛谷邻接矩阵实现 #include<iostream> #include<cstring> using namespace std; const int INF 0x3f3f3f3f; const int N 5e3 10; int dis[N]; //记录每个结点到…...

编程日记 2025/8/19 12:19:02

linux中CosyVoice声音克隆安装教程——TTS文本转语音（数字人组件）

CosyVoice 作为一款先进的语音合成解决方案，其设计理念在于提供高效、稳定且灵活的语音生成工具。本教程将从环境配置、依赖安装、模型下载到服务部署全流程进行详细介绍，旨在为用户提供前瞻性的技术指导，同时兼顾细节解析和专业名词解释&…...

编程日记 2025/8/21 20:20:32

智能手表该存什么音频和文本？场景化存储指南

文章目录为什么需要“场景化存储”？智能手表的定位手机替代不了的场景碎片化的场景存储音频篇：智能手表该存什么音乐和音频？运动场景通勤场景健康场景文本篇：哪些文字信息值得放进手表？（部分情况可使用图…...

编程日记 2025/8/21 5:33:33

怎么检查网站CDN缓存是否生效

为什么要使用CDN缓存？ 网站使用缓存可显著提升加载速度，减少服务器负载和带宽消耗，优化用户体验，增强架构稳定性，助力SEO优化，实现资源高效利用与性能平衡。通过合理配置 CDN 缓存策略，可降低…...

编程日记 2025/8/20 4:11:05

win10安装gitbash工具

问题描述:在Windows下没有预装bash命令处理工具 # WInR输入cmd回车进入命令行,执行以下命令出现乱码 bash 无法使用bash命令解决方案：下载安装gitbash命令行工具 Git Bash 是一个在 Windows 上运行的终端仿真器，集成了 Git 和 Bash shell&#xff0…...

编程日记 2025/8/22 4:28:44

买不起了，iPhone 或涨价 40% ？

周知的原因，新关税对 iPhone 的打击，可以说非常严重。根据 Rosenblatt Securities分析师的预测，若苹果完全把成本转移给消费者。 iPhone 16 标配版的价格，可能上涨43%。 iPhone 16 标配的价格是799美元，上涨43%&am…...

编程日记 2025/8/20 13:06:14

企业级 ClickHouse Docker 离线部署实践指南20250407

企业级 ClickHouse Docker 离线部署实践指南引言在数据分析与日志处理日益重要的今天，ClickHouse 凭借其高性能、列式存储架构，成为企业在大数据分析中的首选引擎之一。本文基于一位金融行业从业者在离线网络环境中部署 ClickHouse 的真实实践过程&a…...

编程日记 2025/8/23 1:51:44

多域名 SSL 证书能保护多少个域名？

一、基础保护数量范围多域名 SSL 证书，顾名思义，可保护多个不同域名。通常情况下，不同证书颁发机构（CA）设定的基础保护数量有所差异。一般的多域名 SSL 证书能保护2 至 5 个域名，这些域名可以是完全独立…...

编程日记 2025/8/22 18:56:18

Linux系统学习Day04 阻塞特性，文件状态及文件夹查询

知识点4【文件的阻塞特性】文件描述符默认为阻塞的比如：我们读取文件数据的时候，如果文件缓冲区没有数据，就需要等待数据的到来，这就是阻塞当然写入的时候，如果发现缓冲区是满的，也需要等待刷新缓…...

编程日记 2025/8/24 17:37:21

【AI】高效地使用 AI 模型的 Prompt（提示词）

明确任务和目标在使用 Prompt 之前，要清楚知道自己想要通过 AI 模型完成什么任务，例如生成文本、回答问题、进行翻译或创作故事等。明确的目标有助于构建更有针对性的 Prompt，引导模型生成符合期望的结果。精准描述问题提供具体细节&am…...

编程日记 2025/8/23 0:18:54

第二十：mysql——Undo Log、Redo Log和Binlog

二进制日志binlog（归档日志）、事务日志redo log（重做日志） MySQL实例挂了或者宕机了，重启的时候InnoDB存储引擎会使用rede log日志恢复数据，保证事务的持久性和完整性和undo log（回滚日志&a…...

编程日记 2025/8/24 10:33:15

LogicFlow-前端流程图开发

LogicFlow-前端流程图开发一、安装使用 1、安装logicflow 通过npm安装logicflow npm install logicflow/core --save# 插件包（不使用插件时不需要引入） npm install logicflow/extension --save2、创建实例 import LogicFlow from "logicflow/…...

编程日记 2025/8/22 4:55:37

第四讲：类与对象（下）

目录 1、再谈构造函数 1.1、构造函数体赋值 1.2、初始化列表 1.3、explicit关键字 2、static成员 3、友元 3.1、友元函数 3.2、友元类 4、内部类 5、匿名对象 6、拷贝对象时的优化（了解） 7、重新理解类与对象 8、日期类的实现 9、练习题 9…...

编程日记 2025/8/22 9:33:40

ReAct 框架 | 提示词工程（1）

ReAct 框架 1、什么是 ReAct 框架？2、基于 ReAct 框架的提示词3、结合 LangChain 框架使用4、总结 1、什么是 ReAct 框架？ ReAct ： Reasoning Acting ，将推理与外部工具调用结合，通过交互式探索解决复杂问题。优点…...

编程日记 2025/8/25 13:03:19

第一部分——Docker篇第一章 Docker容器

关于系统的改造探索开篇：系统改造的调研报告第一部分——Docker篇第一章 Docker容器第二章 Docker安装第三章构建自定义镜像第四章搭建镜像仓库第五章容器编排第六章容器监控文章目录关于系统的改造探索第一部分——Docker篇前言一、就是你了——…...

编程日记 2025/8/21 22:43:37

在此目录下，开启命令行 /home/kt/react 如下操作 tkt4028:~/react$ npm create vitelatest task-manager -- --template react Need to install the following packages: create-vite6.3.1 Ok to proceed? (y) y> npx > cva task-manager --template react…...

编程日记 2025/8/19 21:10:30

AR 赋能儿童娱乐：剧本杀与寻宝小程序搭建秘籍

在科技飞速发展的当下，儿童娱乐领域正经历着一场创新变革。AR（增强现实）技术的融入，为儿童剧本杀与寻宝游戏带来了前所未有的沉浸式体验。通过搭建专属小程序，孩子们能够在虚拟与现实交织的世界中开启奇幻冒险。接下来…...

编程日记 2025/8/24 1:31:17

2017年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2017年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/25 16:47:14

密码学基础——分组密码的运行模式

前面的文章中文我们已经知道了分组密码是一种对称密钥密码体制，其工作原理可以概括为将明文消息分割成固定长度的分组，然后对每个分组分别进行加密处理。下面介绍分组密码的运行模式 1.电码本模式（ECB） 2.密码分组链接模式&…...

编程日记 2025/8/25 9:27:10

zk源码—2.通信协议和客户端原理一

大纲 1.ZooKeeper如何进行序列化 2.深入分析Jute的底层实现原理 3.ZooKeeper的网络通信协议详解 4.客户端的核心组件和初始化过程 5.客户端核心组件HostProvider 6.客户端核心组件ClientCnxn 7.客户端工作原理之会话创建过程 1.ZooKeeper如何进行序列化 (1)什么是序列化…...

编程日记 2025/8/20 19:42:50

【NLP】Transformer网络结构（2）

一、Transformer 整体架构 Transformer 由 Encoder 和 Decoder 堆叠组成，每个 Encoder/Decoder 层包含以下核心模块： Encoder 层：Multi-Head Self-Attention → Add & LayerNorm → Feed-Forward → Add & LayerNormDecoder 层&…...

编程日记 2025/8/23 12:15:25

【LeetCode77】组合

题目描述给定区间 [1, n] 和一个整数 k，需要返回所有可能的 k 个数的组合。思路算法选择：回溯算法回溯算法是一种试探性搜索方法，非常适合用来解决组合问题。基本思想是： 从数字 1 开始，逐步构建组合。当当前组…...

编程日记 2025/8/24 13:12:42

1631. 最小体力消耗路径

文章目录题意思路代码题意题目链接思路搜索代码 class Solution { public:int minimumEffortPath(vector<vector<int>>& heights) {int m heights.size();int n heights[0].size();int x_add[] {0, 0, 1, -1};int y_add[] {1, -1, 0, 0};if (m …...

编程日记 2025/8/20 18:40:03

时间复杂度和空间复杂度

🌟 各位看官好，我是maomi_9526！ 🌍 种一棵树最好是十年前，其次是现在！ 🚀 今天来学习C语言的相关知识。 👍 如果觉得这篇文章有帮助，欢迎您一键三连，分享给更…...

编程日记 2025/8/22 21:23:02

Python基于OpenCV和SVM实现中文车牌识别系统GUI界面

说明：这是一个系统实战项目，如需项目代码可以直接到文章最后关注获取。项目背景随着智能交通系统和智慧城市的发展，车牌识别技术在车辆管理、交通监控、停车场收费等领域发挥着重要作用。传统的车牌识别系统主要针对英文和数字的识别&…...

编程日记 2025/8/20 21:16:52

用AbortController取消事件绑定

视频教程 React - 🤔 Abort Controller 到底是什么神仙玩意？看完这个视频你就明白了！💡_哔哩哔哩_bilibili AbortController的好处之一是事件绑定的函数已无需具名函数,匿名函数也可以被取消事件绑定了 //该代码2秒后点击失效…...

编程日记 2025/8/20 4:54:42

4月7日随笔

晚饭塔斯汀下了晚自习买了一瓶百香果rio 还有一块五毛钱的老酸奶，这个糖吃的时候是真开心呀英语课互动感觉越来越少了，我甚至看了十分钟的小排球解析几何和微积分都听不进去了。就算坐在第三排还是会走神。但是不知道为什么我刷视频和打游戏的时…...

编程日记 2025/8/25 15:16:39

Android使用声网SDK实现音视频互动(RTC)功能

一、前期准备 1、注册声网账号声网官网 2、创建项目拿到AppID，主要证书二、代码部分先上一下官方提供的demo地址： Agora-RTC-QuickStart: 此仓库包含 Agora RTC Native SDK 的QuickStart示例项目。 - Gitee.comhttps://gitee.com/agoraio-comm…...

编程日记 2025/8/25 2:44:09

【go】slice的浅拷贝和深拷贝

浅拷贝(Shallow Copy) 浅拷贝是指只复制切片本身的结构（指针、长度和容量），而不复制底层数组的元素。实现方式直接赋值： slice1 : []int{1, 2, 3} slice2 : slice1 // 浅拷贝切片操作： slice1 : []int{1, 2, 3} s…...

编程日记 2025/8/21 12:44:13

哑铃图：让数据对比一目了然【Dumbbell Chart】

没错，当我祭出 “哑铃” 阵列，你当如何破解，哈哈哈哈…此时，你可以适当怀疑笔者的精神状态了。但话说回来，如果稍加想象，把上图竖起来，“大致” 就是我要分享的 “哑铃图” 了。😑 …...

编程日记 2025/8/20 1:36:59

Spring Boot 集成 MongoDB 时自动创建的核心 Bean 的详细说明及表格总结

以下是 Spring Boot 集成 MongoDB 时自动创建的核心 Bean 的详细说明及表格总结： 核心 Bean 列表及详细说明 1. MongoClient 类型：com.mongodb.client.MongoClient作用： MongoDB 客户端核心接口，负责与 MongoDB 服务器建立连接、…...

编程日记 2025/8/21 8:08:44

水产养殖水下监控无人机推荐-P200PRO

水产养殖水下监控无人机推荐 | 潜鲛 P200 PRO：您的“水下管家”，养鱼增产、降本增效的终极利器！ ——上海棕航电子科技，用技术守护每一方鱼塘一、水产养殖的痛点：看不见的水下，才是赚钱的关键 …...

编程日记 2025/8/22 19:41:23

数据结构与算法-数学-基础数学算法（筛质数，最大公约数，最小公倍数，质因数算法，快速幂，乘法逆元，欧拉函数）

一：筛质数： 1-埃氏筛法该算法核心是从 2 开始，把每个质数的倍数标记为合数，时间复杂度约为 O(nloglogn)。 #include <iostream> #include <vector>u sing namespace std; const int N 1000010; bool st[N]; …...

编程日记 2025/8/25 9:21:31

elasticSearch-搜索引擎

搜索引擎的优势有了数据库分页查询，为什么还需要搜索引擎？ 搜索引擎速度上很快数据库分页查询，随着数据库数据量增大，页数靠后，会导致搜索速度变慢，但是搜索引擎不会搜索引擎支持分词查询，地…...

编程日记 2025/8/21 8:24:32

MQTT-Dashboard-数据集成

sink [sɪŋk] 下沉；沉没；沉降；...

编程日记 2025/8/23 13:54:16

uni-app项目运行在浏览器、微信开发者工具、mumu模拟器

一、安装HBuilder X 1、下载HBuilder X 官网网址：https://dcloud.io/hbuilderx.html 根据电脑系统下载对应的版本（我的电脑是Windows 10） 2.安装HBuilder X 直接将HBuilderX.4.61.2025040322-alpha.zip解压到自己想要存放的文件夹中双击…...

编程日记 2025/8/25 1:03:36

createContext、useContext 和 useReducer 的组合是 React 中管理全局状态的一种常见模式。这种模式非常适合在不引入第三方状态管理库（如 Redux）的情况下，管理复杂的全局状态。