前言
在开发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不一致。
解决方案：单例模式
实现思路
单例模式确保一个类只有一个实例，并提供全局访问点。对于我们的场景，这意味着：
- 整个应用只有一个
InfoManager实例 - 所有组件共享同一份数据和状态
只需要初始化一次
具体实现
// 单例实例存储 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); // true2. 性能优化
- 减少内存占用：只创建一个实例
- 避免重复初始化：只从AsyncStorage加载一次数据
- 减少网络请求：缓存的数据在所有地方共享
3. 状态同步
当用户在任何页面更新信息时，所有其他页面都能立即看到最新数据：
// EditNamePage.tsx - 更新姓名
await infoManager.updateName(newName);
// ProfilePage.tsx - 自动获取到最新数据
const info = await infoManager.getInfo(); // 包含最新的姓名