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

相关推荐
曹牧2 小时前
C#:问号
前端·数据库·c#
windliang2 小时前
Claude Code 源码分析(十一):一段会话怎样保存、恢复与续写
前端·javascript·人工智能
掘金一周2 小时前
掘友们,你们现在下班了都玩啥游戏?| 沸点周刊 8.13
前端·人工智能·后端
HjhIron2 小时前
别再傻等后端接口了!React + Vite + Mock 打造真正的前后端分离开发体验
前端
用户921080262862 小时前
从 CSS 到 Vue Scoped:一篇讲透前端样式的工程化认知
前端
扫一屋3 小时前
Element Plus 源码级深度定制:不 Fork、不改包,用 Vite 插件实现组件行为运行时改造
前端
BigTopOne4 小时前
KOOM 学习计划
前端
自进化Agent智能体4 小时前
Hermes 技能系统详解——安装、使用与浏览
前端
JieE2125 小时前
前端不等人:用 Mock 接口工程让 React 应用独立起飞
前端·react.js·面试