使用 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. 网课教程 特点:高附加值,可复制性强,市场需求大。 执行流程: 选择领域:…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
