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

使用 Context API 管理临时状态,避免 Redux/Zustand 的持久化陷阱

在开发 React Native 应用时,我们经常需要管理全局状态,比如用户信息、主题设置、网络状态等。而对于某些临时状态,例如 数据同步进行中的状态 (isSyncing),我们应该选择什么方式来管理它?

在项目开发过程中,我遇到了这样一个问题:

问题背景:按钮的禁用状态丢失

在应用中,有两个数据同步任务:

  1. 基础数据同步(BasicDataSync)
  2. 按日期选择的同步(SelectedDateSync)

它们各自有一个 isSyncing 变量来表示是否正在同步,以防止用户重复点击按钮。但使用 useState 时,如果用户切换页面,isSyncing 变量会重置,导致按钮又可以点击,可能导致重复请求。

为了让 isSyncing 状态在不同页面间保持一致,我们考虑使用全局状态管理方案。

方案分析:如何存储 isSyncing 状态?

方案 1:使用 AsyncStorage / localStorage(❌ 不推荐)

问题:如果我们把 isSyncing 状态持久化到本地存储(比如 AsyncStoragelocalStorage),会导致 程序退出后,按钮仍然保持禁用状态

  • 应用异常退出后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,独立管理 BasicDataSyncSelectedDateSyncisSyncing 状态。

创建 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.tsxSelectedDateSync.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 应用时&#xff0c;我们经常需要管理全局状态&#xff0c;比如用户信息、主题设置、网络状态等。而对于某些临时状态&#xff0c;例如 数据同步进行中的状态 (isSyncing)&#xff0c;我们应该选择什么方式来管理它&#xff1f; 在项目开发过程中&#xff…...

PyTorch框架——基于深度学习YOLOv8神经网络学生课堂行为检测识别系统

基于YOLOv8深度学习的学生课堂行为检测识别系统&#xff0c;其能识别三种学生课堂行为&#xff1a;names: [举手, 读书, 写字] 具体图片见如下&#xff1a; 第一步&#xff1a;YOLOv8介绍 YOLOv8 是 ultralytics 公司在 2023 年 1月 10 号开源的 YOLOv5 的下一个重大更新版本…...

word2vec 实战应用介绍

Word2Vec 是一种由 Google 在 2013 年推出的重要词嵌入模型,通过将单词映射为低维向量,实现了对自然语言处理任务的高效支持。其核心思想是利用深度学习技术,通过训练大量文本数据,将单词表示为稠密的向量形式,从而捕捉单词之间的语义和语法关系。以下是关于 Word2Vec 实战…...

C# 操作符重载对象详解

.NET学习资料 .NET学习资料 .NET学习资料 一、操作符重载的概念 在 C# 中&#xff0c;操作符重载允许我们为自定义的类或结构体定义操作符的行为。通常&#xff0c;我们熟悉的操作符&#xff0c;如加法&#xff08;&#xff09;、减法&#xff08;-&#xff09;、乘法&#…...

python学opencv|读取图像(五十四)使用cv2.blur()函数实现图像像素均值处理

【1】引言 前序学习进程中&#xff0c;对图像的操作均基于各个像素点上的BGR值不同而展开。 对于彩色图像&#xff0c;每个像素点上的BGR值为三个整数&#xff0c;因为是三通道图像&#xff1b;对于灰度图像&#xff0c;各个像素上的BGR值是一个整数&#xff0c;因为这是单通…...

CNN的各种知识点(四): 非极大值抑制(Non-Maximum Suppression, NMS)

非极大值抑制&#xff08;Non-Maximum Suppression, NMS&#xff09; 1. 非极大值抑制&#xff08;Non-Maximum Suppression, NMS&#xff09;概念&#xff1a;算法步骤&#xff1a;具体例子&#xff1a;PyTorch实现&#xff1a; 总结&#xff1a; 1. 非极大值抑制&#xff08;…...

虚幻基础16:locomotion direction

locomotion locomotion&#xff1a;角色运动系统的总称&#xff1a;包含移动、奔跑、跳跃、转向等。 locomotion direction 玩家输入 玩家输入&#xff1a;通常代表玩家想要的移动方向。 direction 可以计算当前朝向与移动方向的Δ。从而实现朝向与移动(玩家输入)方向的分…...

C++游戏开发实战:从引擎架构到物理碰撞

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 C 是游戏开发中最受欢迎的编程语言之一&#xff0c;因其高性能、低延迟和强大的底层控制能力&#xff0c;被广泛用于游戏…...

代理模式——C++实现

目录 1. 代理模式简介 2. 代码示例 1. 代理模式简介 代理模式是一种行为型模式。 代理模式的定义&#xff1a;由于某些原因需要给某对象提供一个代理以控制该对象的访问。这时&#xff0c;访问对象不适合或者不能直接访问引用目标对象&#xff0c;代理对象作为访问对象和目标…...

什么情况下,C#需要手动进行资源分配和释放?什么又是非托管资源?

扩展&#xff1a;如何使用C#的using语句释放资源&#xff1f;什么是IDisposable接口&#xff1f;与垃圾回收有什么关系&#xff1f;-CSDN博客 托管资源的回收有GC自动触发&#xff0c;而非托管资源需要手动释放。 在 C# 中&#xff0c;非托管资源是指那些不由 CLR&#xff08;…...

LeetCode 2909. 元素和最小的山形三元组 II

**### LeetCode 2909. 元素和最小的山形三元组 II 问题描述 给定一个下标从 0 开始的整数数组 nums&#xff0c;我们需要找到一个“山形三元组”&#xff08;i, j, k&#xff09;满足以下条件&#xff1a; i < j < knums[i] < nums[j] 且 nums[k] < nums[j] 并…...

搬迁至bilibili声明

我将搬迁到bilibili ,用户名&#xff1a;北苏清风 在这个用户名上的文章部分将出自csdn的这个账号&#xff0c;均属于本人原创...

【周易哲学】生辰八字入门讲解(八)

&#x1f60a;你好&#xff0c;我是小航&#xff0c;一个正在变秃、变强的文艺倾年。 &#x1f514;本文讲解【周易哲学】生辰八字入门讲解&#xff0c;期待与你一同探索、学习、进步&#xff0c;一起卷起来叭&#xff01; 目录 一、六亲女命六亲星六亲宫位相互关系 男命六亲星…...

复制粘贴小工具——Ditto

在日常工作中&#xff0c;复制粘贴是常见的操作&#xff0c;但Windows系统自带的剪贴板功能较为有限&#xff0c;只能保存最近一次的复制记录&#xff0c;这对于需要频繁复制粘贴的用户来说不太方便。今天&#xff0c;我们介绍一款开源、免费且功能强大的剪贴板增强工具——Dit…...

3、从langchain到rag

文章目录 本文介绍向量和向量数据库向量向量数据库 索引开始动手实现rag加载文档数据并建立索引将向量存放到向量数据库中检索生成构成一条链 本文介绍 从本节开始&#xff0c;有了上一节的langchain基础学习&#xff0c;接下来使用langchain实现一个rag应用&#xff0c;并稍微…...

稀疏进化训练:机器学习优化算法中的高效解决方案

稀疏进化训练&#xff1a;机器学习优化算法中的高效解决方案 稀疏进化训练&#xff1a;机器学习优化算法中的高效解决方案引言第一部分&#xff1a;背景与动机1.1 传统优化算法的局限性1.2 进化策略的优势1.3 稀疏性的重要性 第二部分&#xff1a;稀疏进化训练的核心思想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&#xff08;变更数据获取&#xff09;的简称。核心思想是&#xff0c;监测并捕获数据库的变动&#xff08;包括数据或数…...

【LeetCode 刷题】回溯算法-子集问题

此博客为《代码随想录》二叉树章节的学习笔记&#xff0c;主要内容为回溯算法子集问题相关的题目解析。 文章目录 78.子集90.子集II 78.子集 题目链接 class Solution:def subsets(self, nums: List[int]) -> List[List[int]]:res, path [], []def dfs(start: int) ->…...

OpenCV 版本不兼容导致的问题

问题和解决方案 今天运行如下代码&#xff0c;发生了意外的错误&#xff0c;代码如下&#xff0c;其中输入的 frame 来自于 OpenCV 开启数据流的读取 """ cap cv2.VideoCapture(RTSP_URL) print("链接视频流完成") while True:ret, frame cap.rea…...

低成本、高附加值,具有较强的可扩展性和流通便利性的行业

目录 虚拟资源类 1. 网课教程 2. 设计素材 3. 软件工具 服务类 1. 写作服务 2. 咨询顾问 3. 在线教育 4. 社交媒体管理 虚拟资源类 1. 网课教程 特点&#xff1a;高附加值&#xff0c;可复制性强&#xff0c;市场需求大。 执行流程&#xff1a; 选择领域&#xff1a…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...