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

相关推荐
ℋᙚᵐⁱᒻᵉ鲸落3 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙4 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
前端snow5 小时前
ai agent --- 实现 openclaw 定时间效果
前端
码云之上6 小时前
换模型之后,Chatbot 为什么要自己做 compact?
前端·agent·前端工程化
星栈6 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香6 小时前
简单的图片上传 删除 预览
前端
ITresearchGuest6 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
慧一居士7 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见8 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain
kyriewen8 小时前
面试官让我用 AI 重构一个 8 年陈的 React 组件——他说他不看代码,只看我会不会拆
前端·javascript·面试