react navite本地存储:AsyncStorage、MMKV、文件存储

在 React Native 里,本地存储可以简单理解成三类:

方案 典型用途 性能 数据类型 适合程度
AsyncStorage 配置、简单缓存、小量数据 ⭐⭐ String / JSON 通用、简单
MMKV 高频读写、状态、Token、配置 ⭐⭐⭐⭐⭐ String / Number / Boolean / Buffer 推荐
文件存储 图片、视频、JSON 大文件、导出文件 ⭐⭐⭐ 文件 大数据/二进制

1. AsyncStorage

最传统、最简单:

javascript 复制代码
import AsyncStorage from '@react-native-async-storage/async-storage';

// 保存
await AsyncStorage.setItem(
  'user',
  JSON.stringify({ id: 123, name: 'Tom' })
);

// 读取
const value = await AsyncStorage.getItem('user');
const user = value ? JSON.parse(value) : null;

// 删除
await AsyncStorage.removeItem('user');

适合:

  • 用户偏好
  • App 配置
  • 简单缓存
  • 不频繁变化的数据

缺点是 API 基于异步操作:

csharp 复制代码
await AsyncStorage.getItem(...)

如果某个数据在 App 启动阶段需要大量读取,会比较麻烦。


2. MMKV

如果是现在做 React Native 项目,我通常更推荐 MMKV。

它是基于内存映射文件的高性能 KV 存储。

例如:

csharp 复制代码
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

// 写
storage.set('token', 'abc123');
storage.set('userId', 123);
storage.set('isLogin', true);

// 读
const token = storage.getString('token');
const userId = storage.getNumber('userId');
const isLogin = storage.getBoolean('isLogin');

// 删除
storage.delete('token');

最大的优势是同步读取:

ini 复制代码
const token = storage.getString('token');

而不是:

ini 复制代码
const token = await AsyncStorage.getItem('token');

所以特别适合:

复制代码
App 启动
   ↓
读取 Token
   ↓
读取用户配置
   ↓
读取主题
   ↓
读取 Feature Flag
   ↓
初始化状态管理

这种场景。

例如:

ini 复制代码
const token = storage.getString('token');

if (token) {
  // 已登录
}

3. 文件存储

文件系统不是 KV Storage,而是:

复制代码
路径 → 文件内容

例如:

markdown 复制代码
DocumentDirectory/
├── user.json
├── cache.json
├── images/
│   ├── 001.jpg
│   └── 002.jpg
└── videos/
    └── xxx.mp4

适合:

  • 图片
  • 视频
  • 音频
  • PDF
  • 大型 JSON
  • 离线资源
  • 文件导入/导出

例如保存 JSON:

javascript 复制代码
await FileSystem.writeFile(
  `${documentDirectory}/user.json`,
  JSON.stringify(user)
);

读取:

ini 复制代码
const text = await FileSystem.readFile(
  `${documentDirectory}/user.json`
);

const user = JSON.parse(text);

这里更适合使用 React Native 生态中的文件系统库,而不是把大数据硬塞进 AsyncStorage/MMKV。


实际项目怎么选?

我建议不要把它们理解成三选一,而是分层使用:

arduino 复制代码
                    React Native App
                           │
             ┌─────────────┴─────────────┐
             │                           │
        小型 KV 数据                  文件数据
             │                           │
          MMKV                      File System
             │                           │
     ┌───────┼───────┐           ┌───────┼───────┐
     │       │       │           │       │       │
   Token   配置    状态          图片    视频    PDF

我的推荐

MMKV:

sql 复制代码
Token
User ID
登录状态
主题
语言
App 配置
Feature Flags
小型缓存

文件系统:

javascript 复制代码
图片
视频
音频
PDF
大型 JSON
离线文件

AsyncStorage:

复制代码
老项目
简单项目
第三方库要求 AsyncStorage
低频、小量数据

一个很重要的区别

不要把 MMKV 当数据库。

如果你的需求变成:

复制代码
用户
  ↓
10000 条消息
  ↓
查询最近 20 条
  ↓
按照时间排序
  ↓
条件过滤
  ↓
分页
  ↓
事务

这时候应该考虑 SQLite / Realm / WatermelonDB 等数据库方案,而不是:

c 复制代码
storage.set('messages', JSON.stringify(allMessages));

否则数据越来越大之后,维护和性能都会变差。

一句话总结:

AsyncStorage = 简单 KV;MMKV = 高性能 KV;文件系统 = 大文件/二进制;SQLite/Realm = 真正的数据查询。

如果你是在做一个实际的 React Native App ,我也可以进一步给你整理一套「MMKV + SQLite + 文件系统」的本地数据架构,包括 Token、用户信息、接口缓存、图片缓存、离线数据分别应该放哪里。

相关推荐
程序员Sunday4 小时前
Vue 3 响应式原理是什么?Proxy、ref 和 reactive 有什么区别?
前端·javascript
mldong4 小时前
一个 npm 包,九页审批中心:Vue3 项目接上工作流引擎
前端·javascript·vue.js
架构技术专栏13 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海13 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝14 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
刘发财15 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源
A接拉起00715 小时前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
用户114818678948415 小时前
面试官:大屏项目里十几个模块同时渲染上万条数据,怎么做到不卡?
前端·性能优化
前端市界15 小时前
Pro React Admin: 统一工程底座,承载多种应用...
前端·github
葡萄城技术团队16 小时前
dsh-spreadjs-editor 当前支持什么:安装前需要了解的几件事
前端