本文介绍如何在 react 中为多个异步数据源（如 posts 和 songs）分别管理加载状态，避免全局 loading 阻塞渲染，支持“谁先就绪谁先展示”的渐进式加载体验，并对比原生 react 方案与 react-query 的实现差异。
本文介绍如何在 react 中为多个异步数据源（如 posts 和 songs）分别管理加载状态，避免全局 loading 阻塞渲染，支持“谁先就绪谁先展示”的渐进式加载体验，并对比原生 react 方案与 react-query 的实现差异。
在构建首页等聚合型页面时，常需并行获取多类资源（如文章列表、音乐列表）。若采用单一 loading 状态控制整体 UI，会导致用户必须等待所有请求完成才能看到任何内容——这违背了现代 Web 应用“渐进式渲染”和“感知性能优化”的最佳实践。
✅ 推荐方案一：原生 React —— 基于数据存在性判断（简洁可靠）
最轻量、无需额外依赖的解法是放弃显式 loading 状态，转而依据数据是否已填充来推断加载阶段。核心逻辑如下：
- 初始化状态为
[]（空数组），而非null或undefined； - 渲染时检查
data.length > 0：为真则渲染列表；为假则根据上下文决定显示占位符或加载指示器； - 若所有数据均为空，才统一展示全局 loading；否则仅对尚未就绪的数据区域单独渲染
<spinner></spinner>。
import { useState, useEffect } from 'react';
function HomePage() {
const [posts, setPosts] = useState([]);
const [songs, setSongs] = useState([]);
useEffect(() => {
// 并行发起请求（可使用 Promise.all 或各自独立 fetch）
Promise.all([
fetch('/api/posts').then(r => r.json()),
fetch('/api/songs').then(r => r.json())
]).then(([fetchedPosts, fetchedSongs]) => {
setPosts(fetchedPosts);
setSongs(fetchedSongs);
});
}, []);
const renderPosts = () => (
<section>
<h2>? Posts</h2>
{posts.length ? (
<ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
) : (
<div className="spinner">Loading posts...</div>
)}
</section>
);
const renderSongs = () => (
<section>
<h2>? Songs</h2>
{songs.length ? (
<ul>{songs.map(s => <li key={s.id}>{s.name}</li>)}</ul>
) : (
<div className="spinner">Loading songs...</div>
)}
</section>
);
return (
<main>
{renderPosts()}
{renderSongs()}
</main>
);
}
export default HomePage;⚠️ 注意事项：
react-modernization下载将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
- 确保 API 返回结构稳定（例如始终返回数组，而非
null/undefined）；若后端可能返回空值，建议在setState前做归一化处理：setPosts(data ?? [])；- 此方案不区分“未开始请求”与“请求中”，若需精确状态（如重试、错误提示），仍需引入
isLoadingPosts/errorPosts等细化状态；- 利用
length判断比Array.isArray()+!data?.length更简洁，且语义明确。
✅ 推荐方案二：使用 React Query —— 状态自治 + 开箱即用
当项目复杂度上升（需缓存、轮询、错误重试、分页、变量依赖等），react-query 是更专业、可扩展的选择。它天然支持每个查询独立的状态生命周期：
npm install @tanstack/react-query
import { useQuery } from '@tanstack/react-query';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function PostsSection() {
const { data: posts = [], isLoading, error } = useQuery({
queryKey: ['posts'],
queryFn: () => fetch('/api/posts').then(res => res.json()),
});
if (isLoading) return <div className="spinner">Loading posts...</div>;
if (error) return <div className="error">Failed to load posts</div>;
return (
<section>
<h2>? Posts</h2>
<ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
</section>
);
}
function SongsSection() {
const { data: songs = [], isLoading, error } = useQuery({
queryKey: ['songs'],
queryFn: () => fetch('/api/songs').then(res => res.json()),
});
if (isLoading) return <div className="spinner">Loading songs...</div>;
if (error) return <div className="error">Failed to load songs</div>;
return (
<section>
<h2>? Songs</h2>
<ul>{songs.map(s => <li key={s.id}>{s.name}</li>)}</ul>
</section>
);
}
function HomePage() {
return (
<QueryClientProvider client={queryClient}>
<PostsSection />
<SongsSection />
</QueryClientProvider>
);
}✅ 优势总结：
- 每个
useQuery自动管理isLoading/isError/data/refetch，无需手动 setState； - 内置请求去重、缓存复用、后台刷新、乐观更新等高级能力；
- 错误边界清晰，支持
onError回调与全局错误处理器； - 类型安全（配合 TypeScript 可精准推导 data 类型）。
? 总结：按需选择，不为技术而技术
| 场景 | 推荐方案 |
|---|---|
| 小型项目、简单双请求、无缓存/重试需求 | 原生方案（基于 length 判断）——轻量、易理解、零依赖 |
| 中大型应用、多数据源、需健壮错误处理/离线支持/性能监控 |
react-query —— 标准化、可维护、生态成熟 |
无论选择哪种方式，核心思想一致：将 UI 渲染逻辑与数据就绪状态强绑定，而非与“请求是否发出”弱绑定。这不仅能提升用户体验，也让组件状态更可预测、更易测试。
