前言

在开发React Native应用时，我们经常会遇到需要在多个组件间共享状态和数据的场景。如果处理不当，很容易出现数据不一致、重复初始化等问题。本文将通过一个真实的项目案例，展示如何使用单例模式来解决这些问题。

问题背景

在我们的LoveConnect项目中，用户信息管理是一个核心功能。我们有一个InfoManager类来处理用户信息的获取、更新和存储。最初的实现如下：

// 原始实现 - 存在问题的版本
export const getInfoManager = (): InfoManager => {
  const isDevelopment = mod === 'development';
  if (isDevelopment) {
    return new InfoManagerText();  // 每次都创建新实例
  } else {
    return new InfoManagerImpl();  // 每次都创建新实例
  }
};

这种实现方式看似简单，但在实际使用中暴露出了严重的问题。

遇到的问题

1. 多实例数据不一致

当不同的React组件调用getInfoManager()时，每次都会创建新的实例：

// ProfilePage.tsx
const infoManager = getInfoManager(); // 实例A

// EditNamePage.tsx  
const infoManager = getInfoManager(); // 实例B

// EditPhonePage.tsx
const infoManager = getInfoManager(); // 实例C

每个实例都有自己的内存缓存和初始化状态：

class InfoManagerImpl implements InfoManager {
  private currentInfo: Info | null = null;  // 每个实例都有独立的缓存
  private initialized = false;              // 每个实例都有独立的状态
}

2. 重复初始化问题

每个新实例都需要重新从AsyncStorage加载数据，造成不必要的性能开销：

async initialize(): Promise<void> {
  if (this.initialized) return;
  try {
    // 每个实例都要重新从存储加载数据
    const stored = await AsyncStorage.getItem(STORAGE_KEY);
    if (stored) {
      this.currentInfo = JSON.parse(stored);
    }
    this.initialized = true;
  } catch (error) {
    console.error('初始化用户信息失败:', error);
  }
}

3. 状态同步问题

用户在一个页面更新信息后，其他页面的实例可能仍然显示旧数据，导致UI不一致。

解决方案：单例模式

实现思路

单例模式确保一个类只有一个实例，并提供全局访问点。对于我们的场景，这意味着：

1. 整个应用只有一个InfoManager实例
2. 所有组件共享同一份数据和状态

3. 只需要初始化一次

   具体实现

   // 单例实例存储
   let infoManagerInstance: InfoManager | null = null;
   
   export const getInfoManager = (): InfoManager => {
     // 如果已经有实例，直接返回
     if (infoManagerInstance) {
       return infoManagerInstance;
     }
     // 首次调用时创建实例
     const isDevelopment = mod === 'development';
     if (isDevelopment) {
       infoManagerInstance = new InfoManagerText();
     } else {
       console.log('使用生产环境信息管理器');
       infoManagerInstance = new InfoManagerImpl();
     }
     return infoManagerInstance;
   };
   
   // 重置单例实例的方法（用于测试或特殊情况）
   export const resetInfoManager = (): void => {
     infoManagerInstance = null;
   };

   在React组件中的使用

   现在所有组件都会获得同一个实例：

   // ProfilePage.tsx
   const infoManager = getInfoManager(); // 获取单例实例
   
   const ProfilePage = () => {
     const [info, setInfo] = useState<any>({});
     const fetchInfo = useCallback(async () => {
       const info = await infoManager.getInfo(); // 使用单例实例
       setInfo(info);
     }, []);
     // 使用useFocusEffect确保页面聚焦时刷新数据
     useFocusEffect(
       useCallback(() => {
         fetchInfo();
       }, [fetchInfo])
     );
     // ...
   };

   优势分析

   1. 数据一致性保证

// 现在所有地方都使用同一个实例
const manager1 = getInfoManager(); // 同一个实例
const manager2 = getInfoManager(); // 同一个实例
console.log(manager1 === manager2); // true

2. 性能优化

• 减少内存占用：只创建一个实例
• 避免重复初始化：只从AsyncStorage加载一次数据
• 减少网络请求：缓存的数据在所有地方共享

3. 状态同步

当用户在任何页面更新信息时，所有其他页面都能立即看到最新数据：

// EditNamePage.tsx - 更新姓名
await infoManager.updateName(newName);

// ProfilePage.tsx - 自动获取到最新数据
const info = await infoManager.getInfo(); // 包含最新的姓名