React Native应用关闭时用async-storage存大状态对象低端机失效如何优化

失效原因 #

低端移动设备系统对后台应用的资源限制非常严格，你的代码遇到的核心问题是：

1. 应用进入后台后，系统留给进程的执行时间极短，你的代码需要当场完成大对象JSON序列化、AsyncStorage写入两个耗时操作，大概率在执行完成前进程就被冻结/杀死，导致写入失败
2. 你存储的状态存在冗余数据（两份完全相同的5000条照片数组），进一步放大了序列化和IO的耗时，低端CPU和存储性能跟不上
3. 代码同时混用async/await、Promise、回调三种异步写法，额外增加了执行开销

优化方案 #

• 提前序列化状态，减少后台任务耗时
  不要等到进入后台才开始序列化状态，在状态更新时就提前完成序列化并缓存结果，后台写入时直接使用缓存好的字符串，节省低端CPU的序列化时间：

  // 新增变量缓存序列化后的状态
  let serializedState = JSON.stringify(APP_STATE);
  
  const appReducer = (state: any, action: any) => {
    const {type, payload} = action;
    const newState = {...state, ...payload};
    APP_STATE = {...APP_STATE, ...newState};
    // 状态更新时直接序列化缓存
    serializedState = JSON.stringify(APP_STATE);
    switch (action.type) {
      case 'resetState':
        return {};
      default:
        return newState;
    }
  };
  
  // 后台监听简化为直接写入缓存
  AppState.addEventListener('change', async e => {
    if (e === 'background') {
      try {
        await AsyncStorage.setItem('STATE', serializedState);
      } catch (err) {
        console.error('存储失败', err);
      }
    }
  });
  

• 裁剪存储体积
  你当前的状态中value和value2是完全相同的数组，属于冗余存储，直接只存储一份数据，读取时再分别赋值给两个字段，存储体积直接减半。如果后续还有更大的存储需求，可以用字符串压缩库对序列化结果做压缩后再存储，进一步降低IO耗时。
• 拆分存储避免单KEY过大
  不要把全量状态存在同一个STATEKEY下，拆分为多个小KEY分别存储，比如STATE_VALUE存第一个数组，STATE_VALUE2存第二个数组，单条写入耗时更短，就算部分写入失败也不会全量丢失数据。
• 申请后台执行时长
  用Headless JS或者后台任务相关的封装库，将存储操作包装为后台任务，向系统申请额外的执行时间，保证写入操作完成前进程不会被杀死。
• 更换更高性能的存储方案
  AsyncStorage本身是基于SQLite封装的，大体积数据写入性能较差，可以更换为MMKV这类性能更高的键值存储库，写入速度比AsyncStorage高几倍到几十倍，对低端设备的兼容性更好。

内容的提问来源于stack exchange，提问作者TINGY RC