如何追踪React Native应用重启（重载）并递增计数器

核心思路 #

利用持久化存储保存计数器值，结合根组件初始化逻辑+热重载事件监听，覆盖所有重启场景（冷启动、实时重载、热重载）。推荐用MMKV替代AsyncStorage，因为它是同步操作，启动时读取无延迟，计数更准确。

实现步骤 #

1. 安装MMKV

npm install react-native-mmkv

2. 根组件中实现计数逻辑

在你的App根组件（比如App.js）中加入以下代码：

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

// 初始化MMKV实例
const storage = new MMKV();

export default function App() {
  useEffect(() => {
    // 处理冷启动和实时重载：根组件挂载时更新计数
    let reloadCount = storage.getNumber('reloadCount') || 0;
    reloadCount += 1;
    storage.set('reloadCount', reloadCount);
    console.log(`累计重启/重载次数：${reloadCount}`);

    // 开发环境下监听热重载事件
    if (__DEV__ && module.hot) {
      const handleHotReload = () => {
        let hotReloadCount = storage.getNumber('reloadCount') || 0;
        hotReloadCount += 1;
        storage.set('reloadCount', hotReloadCount);
        console.log(`热重载触发，累计次数：${hotReloadCount}`);
      };

      // 注册热重载回调
      module.hot.accept(handleHotReload);
      // 组件卸载时移除监听
      return () => module.hot.removeHandler('accept', handleHotReload);
    }
  }, []);

  // 你的App页面内容
  return (
    // ... 原有JSX代码
  );
}

关键说明 #

• 根组件的必要性：根组件是App的入口，冷启动/实时重载时会重新初始化，热重载时也能通过module.hot钩子捕获事件，是唯一能覆盖所有重启场景的执行位置。
• MMKV的优势：同步读写避免了AsyncStorage异步操作导致的计数延迟或丢失问题，在启动阶段能立即读取并更新计数。
• 环境区分：热重载仅存在于开发环境，通过__DEV__判断避免生产环境执行无用逻辑。

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