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、用户信息、接口缓存、图片缓存、离线数据分别应该放哪里。

相关推荐
子兮曰16 小时前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰16 小时前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万17 小时前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝17 小时前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋17 小时前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁18 小时前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王952719 小时前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大20 小时前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师20 小时前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学20 小时前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端