前言
在开发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); // true
2. 性能优化
- 减少内存占用：只创建一个实例
- 避免重复初始化：只从AsyncStorage加载一次数据
- 减少网络请求：缓存的数据在所有地方共享
3. 状态同步
当用户在任何页面更新信息时，所有其他页面都能立即看到最新数据：
// EditNamePage.tsx - 更新姓名
await infoManager.updateName(newName);
// ProfilePage.tsx - 自动获取到最新数据
const info = await infoManager.getInfo(); // 包含最新的姓名
