使用 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. 网课教程 特点:高附加值,可复制性强,市场需求大。 执行流程: 选择领域:…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象: android studio报错: [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决: 不要动CMakeLists.…...
