React集成react-query后仪表盘初始加载过慢问题求助

1. 用placeholderData/initialData让UI先渲染起来 #

• 给每个查询配置placeholderData，设置符合组件结构的默认值（比如空数组、默认统计对象），这样组件不用等数据返回就能先渲染骨架屏或基础UI，数据到了再更新。
• 如果有之前缓存的旧数据，用initialData直接复用，跳过等待新请求的时间。
• 示例代码：

const { data } = useQuery({
  queryKey: ['dashboardStats'],
  queryFn: fetchDashboardStats,
  placeholderData: { views: 0, users: [] }
});

2. 给查询分批，控制请求优先级 #

• 把13个查询分成**核心（高优先级）和次要（低优先级）**两类：
  • 核心查询（比如那个依赖8个查询的组件里的核心数据、可见区域的组件数据）立即发起；
  • 次要查询用enabled选项延迟触发，比如等所有核心请求成功后再开启，或者延迟几百毫秒再发起，避免一次性占满浏览器并发请求上限（一般是6个左右）。
• 示例：

// 先发起高优先级查询
const coreQueries = useQueries([
  { queryKey: ['coreData1'], queryFn: fetchCoreData1 },
  { queryKey: ['coreData2'], queryFn: fetchCoreData2 },
  // ...其他核心查询
]);

// 判断所有核心请求是否完成
const allCoreDone = coreQueries.every(q => q.isSuccess);

// 次要查询仅在核心请求完成后触发
const { data: secondaryData } = useQuery({
  queryKey: ['secondaryData'],
  queryFn: fetchSecondaryData,
  enabled: allCoreDone
});

• 那8个必用的查询也可以拆成2-3批，比如先请求3个最影响UI的，剩下的延迟100ms再发起，避免同时打8个请求拖慢整体速度。

3. 优化组件渲染，减少不必要重渲染 #

• 那个依赖8个查询的组件很容易因为每个查询返回都触发重渲染，导致卡顿：
  • 用React.memo包裹子组件，只在props变化时重渲染；
  • 用useMemo缓存传给子组件的props对象，避免每次data更新都生成新对象触发重渲染。
• 示例：

const DashboardCore = React.memo(({ stats, users, orders }) => {
  // 组件逻辑
});

// 父组件中：
const { data: stats } = useQuery(/* ... */);
const { data: users } = useQuery(/* ... */);
const { data: orders } = useQuery(/* ... */);

const coreProps = useMemo(() => ({
  stats: stats ?? { views: 0 },
  users: users ?? [],
  orders: orders ?? []
}), [stats, users, orders]);

return <DashboardCore {...coreProps} />;

4. 提前预加载数据 #

• 如果用户进入仪表盘前有明确的触发动作（比如点击导航栏的仪表盘按钮），在点击时就调用prefetchQuery发起请求：

const handleDashboardClick = () => {
  queryClient.prefetchQuery({
    queryKey: ['dashboardStats'],
    queryFn: fetchDashboardStats
  });
  navigate('/dashboard');
};

这样用户进入页面时，数据可能已经在缓存里，或者请求已经在跑了，能大幅减少等待时间。

5. 优化API本身 #

• 试试把多个相关接口合并成一个聚合接口，比如把那8个查询合并成一个fetchDashboardCore接口，减少HTTP请求数量；
• 和后端确认下接口的冷启动问题，首次请求慢可能是服务器函数刚初始化，加个服务器端缓存能改善首次响应速度。

6. 优化加载状态的用户体验 #

• 给每个组件加骨架屏，用React Query的isLoading状态控制显示，让用户看到页面结构，不会觉得页面卡住：

const { data, isLoading } = useQuery(/* ... */);

if (isLoading) {
  return <DashboardStatsSkeleton />;
}

return <DashboardStats data={data} />;

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