在开发 React Native 应用时，我们经常需要管理全局状态，比如用户信息、主题设置、网络状态等。而对于某些临时状态，例如 数据同步进行中的状态 (isSyncing)，我们应该选择什么方式来管理它？

在项目开发过程中，我遇到了这样一个问题：

问题背景：按钮的禁用状态丢失

在应用中，有两个数据同步任务：

1. 基础数据同步（BasicDataSync）
2. 按日期选择的同步（SelectedDateSync）

它们各自有一个 isSyncing 变量来表示是否正在同步，以防止用户重复点击按钮。但使用 useState 时，如果用户切换页面，isSyncing 变量会重置，导致按钮又可以点击，可能导致重复请求。

为了让 isSyncing 状态在不同页面间保持一致，我们考虑使用全局状态管理方案。

方案分析：如何存储 isSyncing 状态？

方案 1：使用 AsyncStorage / localStorage（❌ 不推荐）

问题：如果我们把 isSyncing 状态持久化到本地存储（比如 AsyncStorage 或 localStorage），会导致 程序退出后，按钮仍然保持禁用状态。

• 应用异常退出后，isSyncing 仍然是 true
• 重新打开应用，按钮仍然不可点击，而同步任务已经终止
• 用户必须手动清除存储，或者编写额外逻辑检查同步任务是否真的在运行

方案 2：使用 Redux / Zustand（⚠️ 仍然存在潜在问题）

Redux 和 Zustand 是强大的状态管理工具，特别适合管理 持久化的全局数据，比如用户登录状态、设置等。但是对于 isSyncing 这种短暂的 UI 状态，它们可能会引入 状态持久化导致的错误。

• Redux 需要手动清除 isSyncing 状态，否则应用退出后仍然保持
• Zustand 如果使用 persist 配置，也会遇到同样的问题
• 这些库更适合存储业务数据，而非 UI 交互状态

方案 3：使用 Context API（✅ 最优解）

最终，我们选择了 Context API 来管理 isSyncing 状态。

• 轻量级，无需额外的库
• 不会持久化，应用退出时状态自动清除
• 适合管理 UI 控制状态，避免 Redux / Zustand 的持久化问题

实现 SyncContext.tsx

我们创建了 SyncContext.tsx，独立管理 BasicDataSync 和 SelectedDateSync 的 isSyncing 状态。

创建 SyncContext.tsx

import React, { createContext, useState, useContext } from 'react';

interface SyncContextType {
  isSyncingBasicData: boolean;
  setIsSyncingBasicData: (syncing: boolean) => void;
  isSyncingSelectedDate: boolean;
  setIsSyncingSelectedDate: (syncing: boolean) => void;
}

const SyncContext = createContext<SyncContextType>({
  isSyncingBasicData: false,
  setIsSyncingBasicData: () => {},
  isSyncingSelectedDate: false,
  setIsSyncingSelectedDate: () => {},
});

export const SyncProvider: React.FC = ({ children }) => {
  const [isSyncingBasicData, setIsSyncingBasicData] = useState(false);
  const [isSyncingSelectedDate, setIsSyncingSelectedDate] = useState(false);

  return (
    <SyncContext.Provider
      value={{
        isSyncingBasicData,
        setIsSyncingBasicData,
        isSyncingSelectedDate,
        setIsSyncingSelectedDate,
      }}
    >
      {children}
    </SyncContext.Provider>
  );
};

export const useSync = () => useContext(SyncContext);

在 App.tsx 中注册 SyncProvider

import { SyncProvider } from './context/SyncContext';

<SyncProvider>
  <NavigationContainer>
    <NativeBaseProvider>
      <AppNavigator />
    </NativeBaseProvider>
  </NavigationContainer>
</SyncProvider>

在 BasicDataSync.tsx 和 SelectedDateSync.tsx 中使用 SyncContext

import { useSync } from '../../context/SyncContext';

const BasicDataSync = () => {
  const { isSyncingBasicData, setIsSyncingBasicData } = useSync();

  const handleSync = async () => {
    setIsSyncingBasicData(true);
    try {
      await SyncService.syncExtensionData();
    } finally {
      setIsSyncingBasicData(false);
    }
  };

  return <Button isLoading={isSyncingBasicData} onPress={handleSync}>Sync</Button>;
};

总结：为什么 Context API 是最佳选择？

最终，我们使用了 Context API，保证了：
✅ isSyncing 状态不会被持久化，应用退出时自动清除
✅ UI 交互更加流畅，不会遇到 Redux/Zustand 持久化的问题
✅ 代码更加简洁，无需额外引入状态管理库

如果你的 React Native 应用中有类似的 UI 状态管理需求，Context API 可能是你的最佳选择！ 🚀