React Native 数据持久化存储，一片文章带你搞懂

React Native 数据持久化存储

在 React Native 开发中，数据持久化存储是重要的一环。以下是几种常见方案及其实现示例。

简单数据存储（键值对）

AsyncStorage

React Native 提供了 AsyncStorage 作为轻量级键值存储方案，适用于简单数据的持久化。

存储数据

import AsyncStorage from '@react-native-async-storage/async-storage';

// 存储字符串
await AsyncStorage.setItem('userName', 'John Doe');

// 存储对象（需序列化）
const user = { name: 'John', age: 25 };
await AsyncStorage.setItem('userData', JSON.stringify(user));

读取数据

// 读取字符串
const userName = await AsyncStorage.getItem('userName');

// 读取对象
const userData = await AsyncStorage.getItem('userData');
if (userData) {
  const user = JSON.parse(userData);
  console.log(`Name: ${user.name}, Age: ${user.age}`);
} else {
  console.log('No data found');
}

进一步可以抽象成单例模式

const USERNAME = 'user_name';

class StorageManager {
  userName: string;
  
  async init() {
    this.userName = await this.getUserName();
  }
  
  saveUserName(value) {
      AsyncStorage.setItem(USERNAME, value).catch(e => {
          console.error(e);
        });
  }
  
    
  getUserName(value) {
     return AsyncStorage.getItem(USERNAME)
         .then(value => value || '')
         .catch(e => {
            console.error(e);
          });
  }
  
}

const storageManager: StorageManager = new StorageManager();

export default storageManager;

特点

• 异步操作，避免主线程阻塞
• 数据以字符串形式存储
• 适合小规模数据（建议不超过 6MB）

---

复杂数据模型存储

Realm

Realm 是高性能的本地数据库，支持复杂数据模型和关系型操作。

安装

yarn add realm

定义模型

class User extends Realm.Object {
  static schema = {
    name: 'User',
    primaryKey: 'id',
    properties: {
      id: 'int',
      name: 'string',
      age: 'int',
      createdAt: 'date'
    }
  };
}

数据库操作

// 初始化
const realm = new Realm({ schema: [User] });

// 写入数据
realm.write(() => {
  realm.create('User', {
    id: 1,
    name: 'John Doe',
    age: 25,
    createdAt: new Date()
  });
});

// 查询数据
const users = realm.objects('User').filtered('age >= 25');
users.forEach(user => {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
});

WatermelonDB

WatermelonDB 是高性能的 React Native 数据库，基于 SQLite。

安装

yarn add @nozbe/watermelondb
yarn add @nozbe/with-observables

定义模型

import { appSchema, tableSchema, Model } from '@nozbe/watermelondb';

export const schema = appSchema({
  version: 1,
  tables: [
    tableSchema({
      name: 'users',
      columns: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'number' }
      ]
    })
  ]
});

数据库操作

// 创建记录
await database.write(async () => {
  await database.get('users').create(user => {
    user.name = 'John Doe';
    user.age = 25;
  });
});

// 查询记录
const users = await database.get('users').query().fetch();

---

高性能键值存储

MMKV

MMKV 是腾讯开源的高性能键值存储方案。

安装

yarn add react-native-mmkv

使用示例

import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

// 存储数据
storage.set('user.name', 'John Doe');
storage.set('user.age', 25);

// 读取数据
const name = storage.getString('user.name');
const age = storage.getNumber('user.age');

特点

• 读写速度比 AsyncStorage 快 100 倍
• 支持加密存储
• 支持数据类型自动推断

---

文件系统存储

react-native-fs

react-native-fs 提供完整的文件系统访问能力。

写入文件

import { writeFile, DocumentDirectoryPath } from 'react-native-fs';

const path = `${DocumentDirectoryPath}/data.txt`;
await writeFile(path, 'Hello World', 'utf8');

读取文件

import { readFile } from 'react-native-fs';

const content = await readFile(path, 'utf8');
console.log(content);

---

数据持久化方案选择指南

方案	数据类型	性能	查询能力	数据量限制
AsyncStorage	键值对	中	无	< 6MB
MMKV	键值对	高	无	无
Realm	复杂关系型数据	高	强	无
WatermelonDB	复杂关系型数据	高	强	无
文件系统 react-native-fs	任意格式文件	中	无	设备限制

---

参考链接

AsyncStorage 文档
Realm 官方文档
WatermelonDB GitHub
MMKV GitHub
react-native-fs GitHub