使用 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. 网课教程 特点:高附加值,可复制性强,市场需求大。 执行流程: 选择领域:…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
