React Native离线数据加载最优方案咨询（含Zustand/React Query）

核心方向：砍请求量 + 缓存持久化 + 状态整理 #

第一步：先解决1600次请求的性能问题 #

这是最关键的优化点，别硬扛高请求量：

• 优先找后端改接口，做个批量查询接口（比如 /api/data/batch），允许同时传多个locationId、year、datatype，一次把所有数据拉回来，直接把请求数从1600砍到1，这是最优解。
• 如果后端没法改，就用React Query的useQueries做并发请求，同时控制并发数（比如一次发20个），避免把请求池堵死导致加载缓慢。

第二步：用React Query搞定查询与离线缓存 #

React Query自带缓存能力，配合持久化插件就能直接实现离线读取数据的需求。

1. 配置本地持久化缓存（离线核心）

用@tanstack/react-query-persist-client和@tanstack/query-storage-persister，结合React Native的AsyncStorage把数据存在本地，离线时直接读取缓存。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { persistQueryClient } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-storage-persister';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 初始化QueryClient，设置缓存永不过期（因为是全量加载后离线使用）
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      cacheTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    },
  },
});

// 配置本地存储持久化
const persister = createAsyncStoragePersister({
  storage: AsyncStorage,
});

persistQueryClient({
  queryClient,
  persister,
});

// 在App根组件用QueryClientProvider包裹
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的应用内容 */}
    </QueryClientProvider>
  );
}

2. 实现全量数据加载逻辑

先拉取所有Locations，再批量拉取所有类型的数据：

import { useQuery, useQueries } from '@tanstack/react-query';
import { ActivityIndicator, Text } from 'react-native';
import { useEffect } from 'react';
import { useStore } from './store';

// 获取所有Locations的Hook
const useLocations = () => {
  return useQuery({
    queryKey: ['locations'],
    queryFn: async () => {
      const res = await fetch('/api/locations/');
      return res.json();
    },
  });
};

// 批量拉取所有数据类型的Hook
const useAllDataTypeData = (locations) => {
  // 生成所有需要请求的参数组合
  const requestConfigs = [];
  locations?.forEach(location => {
    location.years.forEach(year => {
      ['datatype-1', 'datatype-2', 'datatype-3', 'datatype-4'].forEach(datatype => {
        requestConfigs.push({ locationId: location.id, year, datatype });
      });
    });
  });

  // 用useQueries并发请求，同时组合结果
  return useQueries({
    queries: requestConfigs.map(config => ({
      queryKey: ['data', config.datatype, config.locationId, config.year],
      queryFn: async () => {
        const res = await fetch(`/api/${config.datatype}/location/${config.locationId}/year/${config.year}`);
        const data = await res.json();
        // 补全标识字段，方便后续整理数据结构
        return { ...data, locationId: config.locationId, year: config.year, datatype: config.datatype };
      },
      retry: 2, // 请求失败重试2次
    })),
    combine: (results) => ({
      data: results.map(r => r.data).filter(Boolean),
      isLoading: results.some(r => r.isLoading),
      isError: results.some(r => r.isError),
    }),
  });
};

// 数据加载组件示例
const DataLoader = () => {
  const { data: locations, isLoading: locationsLoading } = useLocations();
  const { data: allRawData, isLoading: dataLoading, isError } = useAllDataTypeData(locations);
  const setStructuredData = useStore(state => state.setData);

  // 加载完成后整理数据结构，存入Zustand
  useEffect(() => {
    if (allRawData?.length) {
      const structured = {};
      allRawData.forEach(item => {
        if (!structured[item.locationId]) structured[item.locationId] = {};
        if (!structured[item.locationId][item.year]) structured[item.locationId][item.year] = {};
        structured[item.locationId][item.year][item.datatype] = item;
      });
      setStructuredData(structured);
    }
  }, [allRawData, setStructuredData]);

  if (locationsLoading || dataLoading) return <ActivityIndicator />;
  if (isError) return <Text>数据加载失败，请检查网络</Text>;

  return <Text>数据加载完成，可离线使用</Text>;
};

export default DataLoader;

第三步：用Zustand管理结构化数据（可选） #

如果需要在多个组件里快速按location/year/datatype取数据，可以用Zustand存储整理好的数据，不用每次从React Query缓存里解析：

import { create } from 'zustand';

export const useStore = create((set, get) => ({
  structuredData: {},
  setData: (data) => set({ structuredData: data }),
  // 快速查询方法
  getDataType: (locationId, year, datatype) => {
    const data = get().structuredData;
    return data?.[locationId]?.[year]?.[datatype] || null;
  },
}));

离线使用注意事项 #

• 必须在联网时完成首次全量加载，确保数据都持久化到本地
• React Query的持久化会自动处理离线时的缓存读取，无需额外编写逻辑
• 如果后续需要更新数据，可以添加定时拉取逻辑，但要注意控制请求量，避免再次出现大量请求

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