使用 Context API 管理临时状态,避免 Redux/Zustand 的持久化陷阱
在开发 React Native 应用时,我们经常需要管理全局状态,比如用户信息、主题设置、网络状态等。而对于某些临时状态,例如 数据同步进行中的状态 (isSyncing),我们应该选择什么方式来管理它?
在项目开发过程中,我遇到了这样一个问题:
问题背景:按钮的禁用状态丢失
在应用中,有两个数据同步任务:
- 基础数据同步(BasicDataSync)
- 按日期选择的同步(SelectedDateSync)
它们各自有一个 isSyncing 变量来表示是否正在同步,以防止用户重复点击按钮。但使用 useState 时,如果用户切换页面,isSyncing 变量会重置,导致按钮又可以点击,可能导致重复请求。
为了让 isSyncing 状态在不同页面间保持一致,我们考虑使用全局状态管理方案。
方案分析:如何存储 isSyncing 状态?
方案 1:使用 AsyncStorage / localStorage(❌ 不推荐)
问题:如果我们把 isSyncing 状态持久化到本地存储(比如 AsyncStorage 或 localStorage),会导致 程序退出后,按钮仍然保持禁用状态。
- 应用异常退出后,
isSyncing仍然是true - 重新打开应用,按钮仍然不可点击,而同步任务已经终止
- 用户必须手动清除存储,或者编写额外逻辑检查同步任务是否真的在运行
方案 2:使用 Redux / Zustand(⚠️ 仍然存在潜在问题)
Redux 和 Zustand 是强大的状态管理工具,特别适合管理 持久化的全局数据,比如用户登录状态、设置等。但是对于 isSyncing 这种短暂的 UI 状态,它们可能会引入 状态持久化导致的错误。
- Redux 需要手动清除
isSyncing状态,否则应用退出后仍然保持 - Zustand 如果使用
persist配置,也会遇到同样的问题 - 这些库更适合存储业务数据,而非 UI 交互状态
方案 3:使用 Context API(✅ 最优解)
最终,我们选择了 Context API 来管理 isSyncing 状态。
- 轻量级,无需额外的库
- 不会持久化,应用退出时状态自动清除
- 适合管理 UI 控制状态,避免 Redux / Zustand 的持久化问题
实现 SyncContext.tsx
我们创建了 SyncContext.tsx,独立管理 BasicDataSync 和 SelectedDateSync 的 isSyncing 状态。
创建 SyncContext.tsx
import React, { createContext, useState, useContext } from 'react';interface SyncContextType {isSyncingBasicData: boolean;setIsSyncingBasicData: (syncing: boolean) => void;isSyncingSelectedDate: boolean;setIsSyncingSelectedDate: (syncing: boolean) => void;
}const SyncContext = createContext<SyncContextType>({isSyncingBasicData: false,setIsSyncingBasicData: () => {},isSyncingSelectedDate: false,setIsSyncingSelectedDate: () => {},
});export const SyncProvider: React.FC = ({ children }) => {const [isSyncingBasicData, setIsSyncingBasicData] = useState(false);const [isSyncingSelectedDate, setIsSyncingSelectedDate] = useState(false);return (<SyncContext.Providervalue={{isSyncingBasicData,setIsSyncingBasicData,isSyncingSelectedDate,setIsSyncingSelectedDate,}}>{children}</SyncContext.Provider>);
};export const useSync = () => useContext(SyncContext);
在 App.tsx 中注册 SyncProvider
import { SyncProvider } from './context/SyncContext';<SyncProvider><NavigationContainer><NativeBaseProvider><AppNavigator /></NativeBaseProvider></NavigationContainer>
</SyncProvider>
在 BasicDataSync.tsx 和 SelectedDateSync.tsx 中使用 SyncContext
import { useSync } from '../../context/SyncContext';const BasicDataSync = () => {const { isSyncingBasicData, setIsSyncingBasicData } = useSync();const handleSync = async () => {setIsSyncingBasicData(true);try {await SyncService.syncExtensionData();} finally {setIsSyncingBasicData(false);}};return <Button isLoading={isSyncingBasicData} onPress={handleSync}>Sync</Button>;
};
总结:为什么 Context API 是最佳选择?
| 方案 | 状态存储 | 退出应用后状态 | 适用场景 |
|---|---|---|---|
| AsyncStorage / localStorage | 本地存储 | 退出应用仍然保持 | 适用于长期数据(如用户设置) |
| Redux / Zustand | 状态管理器 | 可能仍然保持 | 适用于全局共享数据(如用户信息) |
| Context API | 内存存储 | 退出应用后状态重置 | 适用于 UI 交互状态(如 isSyncing) |
最终,我们使用了 Context API,保证了:
✅ isSyncing 状态不会被持久化,应用退出时自动清除
✅ UI 交互更加流畅,不会遇到 Redux/Zustand 持久化的问题
✅ 代码更加简洁,无需额外引入状态管理库
如果你的 React Native 应用中有类似的 UI 状态管理需求,Context API 可能是你的最佳选择! 🚀
相关文章:
使用 Context API 管理临时状态,避免 Redux/Zustand 的持久化陷阱
在开发 React Native 应用时,我们经常需要管理全局状态,比如用户信息、主题设置、网络状态等。而对于某些临时状态,例如 数据同步进行中的状态 (isSyncing),我们应该选择什么方式来管理它? 在项目开发过程中ÿ…...
PyTorch框架——基于深度学习YOLOv8神经网络学生课堂行为检测识别系统
基于YOLOv8深度学习的学生课堂行为检测识别系统,其能识别三种学生课堂行为:names: [举手, 读书, 写字] 具体图片见如下: 第一步:YOLOv8介绍 YOLOv8 是 ultralytics 公司在 2023 年 1月 10 号开源的 YOLOv5 的下一个重大更新版本…...
word2vec 实战应用介绍
Word2Vec 是一种由 Google 在 2013 年推出的重要词嵌入模型,通过将单词映射为低维向量,实现了对自然语言处理任务的高效支持。其核心思想是利用深度学习技术,通过训练大量文本数据,将单词表示为稠密的向量形式,从而捕捉单词之间的语义和语法关系。以下是关于 Word2Vec 实战…...
C# 操作符重载对象详解
.NET学习资料 .NET学习资料 .NET学习资料 一、操作符重载的概念 在 C# 中,操作符重载允许我们为自定义的类或结构体定义操作符的行为。通常,我们熟悉的操作符,如加法()、减法(-)、乘法&#…...
python学opencv|读取图像(五十四)使用cv2.blur()函数实现图像像素均值处理
【1】引言 前序学习进程中,对图像的操作均基于各个像素点上的BGR值不同而展开。 对于彩色图像,每个像素点上的BGR值为三个整数,因为是三通道图像;对于灰度图像,各个像素上的BGR值是一个整数,因为这是单通…...
CNN的各种知识点(四): 非极大值抑制(Non-Maximum Suppression, NMS)
非极大值抑制(Non-Maximum Suppression, NMS) 1. 非极大值抑制(Non-Maximum Suppression, NMS)概念:算法步骤:具体例子:PyTorch实现: 总结: 1. 非极大值抑制(…...
虚幻基础16:locomotion direction
locomotion locomotion:角色运动系统的总称:包含移动、奔跑、跳跃、转向等。 locomotion direction 玩家输入 玩家输入:通常代表玩家想要的移动方向。 direction 可以计算当前朝向与移动方向的Δ。从而实现朝向与移动(玩家输入)方向的分…...
C++游戏开发实战:从引擎架构到物理碰撞
📝个人主页🌹:一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 1. 引言 C 是游戏开发中最受欢迎的编程语言之一,因其高性能、低延迟和强大的底层控制能力,被广泛用于游戏…...
代理模式——C++实现
目录 1. 代理模式简介 2. 代码示例 1. 代理模式简介 代理模式是一种行为型模式。 代理模式的定义:由于某些原因需要给某对象提供一个代理以控制该对象的访问。这时,访问对象不适合或者不能直接访问引用目标对象,代理对象作为访问对象和目标…...
什么情况下,C#需要手动进行资源分配和释放?什么又是非托管资源?
扩展:如何使用C#的using语句释放资源?什么是IDisposable接口?与垃圾回收有什么关系?-CSDN博客 托管资源的回收有GC自动触发,而非托管资源需要手动释放。 在 C# 中,非托管资源是指那些不由 CLR(…...
LeetCode 2909. 元素和最小的山形三元组 II
**### LeetCode 2909. 元素和最小的山形三元组 II 问题描述 给定一个下标从 0 开始的整数数组 nums,我们需要找到一个“山形三元组”(i, j, k)满足以下条件: i < j < knums[i] < nums[j] 且 nums[k] < nums[j] 并…...
搬迁至bilibili声明
我将搬迁到bilibili ,用户名:北苏清风 在这个用户名上的文章部分将出自csdn的这个账号,均属于本人原创...
【周易哲学】生辰八字入门讲解(八)
😊你好,我是小航,一个正在变秃、变强的文艺倾年。 🔔本文讲解【周易哲学】生辰八字入门讲解,期待与你一同探索、学习、进步,一起卷起来叭! 目录 一、六亲女命六亲星六亲宫位相互关系 男命六亲星…...
复制粘贴小工具——Ditto
在日常工作中,复制粘贴是常见的操作,但Windows系统自带的剪贴板功能较为有限,只能保存最近一次的复制记录,这对于需要频繁复制粘贴的用户来说不太方便。今天,我们介绍一款开源、免费且功能强大的剪贴板增强工具——Dit…...
3、从langchain到rag
文章目录 本文介绍向量和向量数据库向量向量数据库 索引开始动手实现rag加载文档数据并建立索引将向量存放到向量数据库中检索生成构成一条链 本文介绍 从本节开始,有了上一节的langchain基础学习,接下来使用langchain实现一个rag应用,并稍微…...
稀疏进化训练:机器学习优化算法中的高效解决方案
稀疏进化训练:机器学习优化算法中的高效解决方案 稀疏进化训练:机器学习优化算法中的高效解决方案引言第一部分:背景与动机1.1 传统优化算法的局限性1.2 进化策略的优势1.3 稀疏性的重要性 第二部分:稀疏进化训练的核心思想2.1 稀…...
10 Flink CDC
10 Flink CDC 1. CDC是什么2. CDC 的种类3. 传统CDC与Flink CDC对比4. Flink-CDC 案例5. Flink SQL 方式的案例 1. CDC是什么 CDC 是 Change Data Capture(变更数据获取)的简称。核心思想是,监测并捕获数据库的变动(包括数据或数…...
【LeetCode 刷题】回溯算法-子集问题
此博客为《代码随想录》二叉树章节的学习笔记,主要内容为回溯算法子集问题相关的题目解析。 文章目录 78.子集90.子集II 78.子集 题目链接 class Solution:def subsets(self, nums: List[int]) -> List[List[int]]:res, path [], []def dfs(start: int) ->…...
OpenCV 版本不兼容导致的问题
问题和解决方案 今天运行如下代码,发生了意外的错误,代码如下,其中输入的 frame 来自于 OpenCV 开启数据流的读取 """ cap cv2.VideoCapture(RTSP_URL) print("链接视频流完成") while True:ret, frame cap.rea…...
低成本、高附加值,具有较强的可扩展性和流通便利性的行业
目录 虚拟资源类 1. 网课教程 2. 设计素材 3. 软件工具 服务类 1. 写作服务 2. 咨询顾问 3. 在线教育 4. 社交媒体管理 虚拟资源类 1. 网课教程 特点:高附加值,可复制性强,市场需求大。 执行流程: 选择领域:…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
