资讯动态

react-native-mmkv 与 Recoil 集成:用 atomEffect 实现 atom 状态持久化

发布时间:2026/9/25 13:15:20 来源:尧图企业网站定制
【免费下载链接】react-native-mmkv⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!项目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv点击查看免费下载Recoil 的 atom 状态默认只存在于内存中应用重启后便会丢失。本文基于 react-native-mmkv 官方提供的persistAtom封装见仓库内 docs/WRAPPER_RECOIL.md讲解如何利用 Recoil 的 atom effects 机制把任意 atom 的读写无缝落到 MMKV 这一同步、高性能的原生键值存储上。读完本文你将掌握一套可复制、可扩展的 Recoil 持久化方案并理解其背后每个 API 调用的含义与底层实现。为什么需要 persistAtomRecoil 与 MMKV 的互补Recoil 的核心状态单元是 atom它由key与default定义运行时存放在内存中。一旦 App 被杀掉或重启这些状态就全部丢失。常见的做法是把状态序列化后写入磁盘并在启动时恢复——而 react-native-mmkv 恰好是这一场景的最佳载体完全同步 APIgetString、set、remove都是同步调用没有 Promise、没有 Bridge读取与写入即时返回接口定义见 packages/react-native-mmkv/src/specs/MMKV.nitro.ts原生 C 实现底层由 Tencent MMKV 驱动读写性能远高于 AsyncStorage 等异步方案多实例与加密支持可以按业务拆分为多个存储实例也可以对敏感数据启用 AES 加密。Recoil 提供了一种官方的“副作用钩子”机制——atom effects。它允许你在 atom 初始化、变更、重置时执行自定义逻辑persistAtom正是借助这一机制把“恢复、写入、删除”三件事与 MMKV 一一对应起来。官方 persistAtom 封装完整代码docs/WRAPPER_RECOIL.md给出的核心封装如下它接收一个存储 key返回一个 Recoil atom effectconst persistAtom (key) ({ setSelf, onSet }) { setSelf(() { let data storage.getString(key); if (data ! null){ return JSON.parse(data); } else { return new DefaultValue(); } }); onSet((newValue, _, isReset) { if (isReset) { storage.remove(key); } else { storage.set(key, JSON.stringify(newValue)); } }); };使用前需先创建一个 MMKV 实例并导出复用这也是官方推荐的做法实例应贯穿整个 App 生命周期避免反复创建import { createMMKV } from react-native-mmkv; export const storage createMMKV();createMMKV()不传参数时会使用默认存储 IDmmkv.default默认值见 packages/react-native-mmkv/src/specs/MMKVFactory.nitro.ts 的defaultMMKVInstanceId。在 Jest/Vitest 测试环境下createMMKV会自动返回内存 Mock 实例因此测试代码可以原样运行见 packages/react-native-mmkv/src/createMMKV/createMMKV.ts 中isTest()分支。逐段拆解persistAtom 的工作原理这个封装虽短但完整覆盖了持久化所需的全部生命周期下面逐一说明每个回调的职责。setSelf初始化时从 MMKV 恢复状态atom effect 的setSelf回调在 atom 首次初始化时执行用来把外部存储中的值“注入”到 atom 内部setSelf(() { let data storage.getString(key); if (data ! null){ return JSON.parse(data); } else { return new DefaultValue(); } });storage.getString(key)是 MMKV 的同步读取接口若该 key 不存在则返回undefined类型签名见 MMKV.nitro.ts存在数据时用JSON.parse把存储的 JSON 字符串还原成 JS 对象/数组/基本类型交给setSelf作为 atom 的初始值不存在数据时返回new DefaultValue()——这是 Recoil 的特殊占位符表示“使用 atom 定义里的default”从而保证首次启动时状态回落到预期的默认值而不是undefined。onSet状态变更时写回 MMKVonSet在 atom 值被更新时触发接收三个参数新值newValue、旧值本例用_忽略以及isReset标志onSet((newValue, _, isReset) { if (isReset) { storage.remove(key); } else { storage.set(key, JSON.stringify(newValue)); } });普通更新storage.set(key, JSON.stringify(newValue))先把新值序列化为 JSON 字符串再同步写入 MMKVset支持 string/number/boolean/ArrayBuffer见 MMKV.nitro.ts重置操作当调用resetState或useRecoilState的 setter 传入DefaultValue时isReset为true此时直接storage.remove(key)删除对应记录——这样 MMKV 里不会残留“重置前的旧数据”下次启动时setSelf会再次因找不到 key 而回落到默认值。这个“写入走 set、重置走 remove”的对称设计保证了内存状态与磁盘存储在任何时刻都保持一致。实际使用把 persistAtom 挂载到 atompersistAtom 返回的是标准的 atom effect将它放进 atom 的 effects 数组即可启用持久化新版本 Recoil 使用effects早期版本为effects_UNSTABLEimport { atom, DefaultValue } from recoil; const userAtom atom({ key: user, default: null, effects: [persistAtom(user)], });之后正常使用useRecoilState(userAtom)/useRecoilValue(userAtom)const [user, setUser] useRecoilState(userAtom); // 写入setUser 触发 onSet数据自动 JSON 序列化后落入 MMKV setUser({ name: Marc, age: 21 }); // 重置触发 isReset 分支MMKV 中对应 key 被删除 resetUser();要点说明key参数如user同时充当 Recoil atom 的标识与 MMKV 的存储键务必保持唯一default值只在 MMKV 无对应数据时生效二者应保持类型一致由于底层是同步调用写入完成后立即重启 App数据也能完整恢复不存在异步竞态窗口。深入进阶让方案更健壮、更贴合业务JSON 序列化的类型边界persistAtom 依赖JSON.stringify/JSON.parse往返传输数据因此仅能持久化 JSON 可表达的值对象、数组、字符串、数字、布尔值、nullundefined、Date、Map、Set、函数等会被JSON.stringify降级或丢弃如需持久化这类值应先在业务侧转换为可序列化形态若默认值本身是复杂嵌套结构可考虑在setSelf中增加 try/catch 或版本号字段migration避免历史数据格式不兼容导致解析失败。使用独立存储实例隔离业务数据默认的storage与所有使用默认实例的业务共用同一个存储空间。若需要隔离例如“用户数据”与“全局配置”分开、或需要独立加密可以创建多个实例并分别封装const secureStorage createMMKV({ id: secure-storage, encryptionKey: my-encryption-key!, encryptionType: AES-256, }); const persistAtomSecure (key) ({ setSelf, onSet }) { // 同样逻辑只是把 storage 换成 secureStorage };MMKV 支持id、path、encryptionKey、encryptionType、mode、readOnly、compareBeforeSet等配置项完整说明见 packages/react-native-mmkv/src/specs/MMKVFactory.nitro.ts 与仓库 README.md。跨组件/跨进程同步默认的 persistAtom 只在写入方触发onSet其他组件不会自动感知 MMKV 文件被外部进程如 App Clip、Widget、扩展修改。若需要跨进程同步可借助 MMKV 的addOnValueChangedListener见 MMKV.nitro.ts监听键变更再手动setSelf刷新对应 atom。注意Recoil 的 atom effect 中setSelf也可在后续任意时刻被调用如收到外部变更通知时这正是扩展该封装的切入点。测试环境的行为差异在 Jest/Vitest 下createMMKV()返回 Mock 实例createMockMMKV持久化数据仅存在于测试进程内存中因此上述封装可以原样进入单元测试无需 mock Recoil 或 MMKV见 createMMKV.ts 与 packages/react-native-mmkv/src/createMMKV/createMockMMKV.ts。与其他状态库封装的对照本仓库的 docs 目录下还提供了同类集成指南可互相参考设计思路docs/WRAPPER_JOTAI.md基于 Jotai 的atomWithStorage封装docs/WRAPPER_ZUSTAND_PERSIST_MIDDLEWARE.md实现 zustand persist middleware 的StateStorage适配docs/WRAPPER_REDUX.md 与 docs/WRAPPER_MOBX.mdredux-persist、mobx-persist 适配。它们共同印证了一个事实MMKV 的同步getString/set/removeAPI 是天然的“存储适配器”无论上层是哪个状态管理库只需把存储接口映射到这三个方法即可完成接入。结语persistAtom用不到 20 行代码就为 Recoil 的 atom 补齐了“启动恢复、变更写入、重置删除”的完整持久化闭环。它以 Recoil 官方推荐的 atom effects 为骨架、以 MMKV 同步 API 为落点让状态持久化变成可插拔、可测试、可复用的标准能力。在此基础上你还可以按业务需要扩展出加密实例、多实例隔离、版本迁移与跨进程同步等能力——核心代码与完整配置项均可直接在 packages/react-native-mmkv 目录下查阅与验证。赞分享【免费下载链接】react-native-mmkv⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!项目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv点击查看免费下载相关推荐React Native MMKV与Recoil集成原子状态持久化的高效实现React Native MMKV与Recoil集成原子状态持久化的高效实现 React Native MMKV作为最快的键值存储解决方案与Recoil状态PhxQueue与Kafka/RabbitMQ对比分析为何选择微信开源的分布式队列PhxQueue与Kafka/RabbitMQ对比分析为何选择微信开源的分布式队列 在当今分布式系统架构中 分布式消息队列 已成为微服务架构的核心组件。面对Saucer高级特性实战前端资源嵌入二进制与无框窗口透明效果实现Saucer高级特性实战前端资源嵌入二进制与无框窗口透明效果实现 Saucer是一个现代化的跨平台C WebView库它让开发者能够轻松构建跨平台桌面应上一篇三步搞定B站大会员4K视频下载Python工具助你离线保存充电专属内容下一篇智能激活解决方案KMS_VL_ALL_AIO轻松管理Windows和Office授权创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑