为什么你的项目里到处都是loading?其实React早就给出了答案

先看到顶部导航的loading → 
然后看到侧边栏的骨架屏 → 
接着看到主内容区的菊花转 → 
最后表格数据一行行蹦出来 →
页面还在抖动调整布局...

function UserProfile() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchUserData()
      .then(data => {
        setUser(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

if (loading) return<Spinner />;
if (error) return<ErrorMessage error={error} />;
if (!user) return null;

return<div>{user.name}</div>;
}

用户视角的时间轴:
0ms:  看到页面框架
200ms: 顶部loading消失,内容出现
300ms: 侧边栏loading消失,布局位移
500ms: 主内容loading消失,又一次位移
800ms: 表格数据逐行出现,持续抖动...

// 团队A的方案
const { data, loading } = useRequest(fetchData);

// 团队B的方案  
const { data, isLoading } = useFetch(url);

// 团队C的方案
const [data, loading] = useAsync(promise);

传统方式(组件主动管理):
┌─────────────────────────────────────┐
│   Component                         │
│   ├─ 检查loading状态?              │
│   ├─ 是 → 显示<Spinner />          │
│   └─ 否 → 渲染真实内容              │
└─────────────────────────────────────┘
       ↓
[组件要操心加载的每个细节]


Suspense方式(组件被动渲染):
┌─────────────────────────────────────┐
│   <Suspense fallback={<Spinner />}> │
│      <Component />                  │
│   </Suspense>                       │
└─────────────────────────────────────┘
       ↓
Component内部:
  const data = use(promise);  // 阻塞在这里
return <div>{data.name}</div>;

[组件根本不知道loading的存在]

// Suspense内部的简化逻辑
function Suspense({ children, fallback }) {
  try {
    return children; // 尝试渲染子组件
  } catch (promise) {
    if (promise instanceof Promise) {
      promise.then(() => rerender()); // 等待完成后重新渲染
      return fallback; // 现在显示loading
    }
  }
}

function ProductPage() {
const [product, setProduct] = useState(null);
const [reviews, setReviews] = useState(null);
const [recommendations, setRecommendations] = useState(null);
const [shop, setShop] = useState(null);

const [loading, setLoading] = useState({
    product: true,
    reviews: true,
    recommendations: true,
    shop: true
  });

  useEffect(() => {
    // 四个请求,四次loading状态更新
    fetchProduct().then(data => {
      setProduct(data);
      setLoading(prev => ({ ...prev, product: false }));
    });
    
    fetchReviews().then(data => {
      setReviews(data);
      setLoading(prev => ({ ...prev, reviews: false }));
    });
    
    // ... 还有两个请求
  }, []);

return (
    <div>
      {loading.product ? <Skeleton /> : <ProductInfo data={product} />}
      {loading.reviews ? <Skeleton /> : <Reviews data={reviews} />}
      {loading.recommendations ? <Skeleton /> : <Recommendations data={recommendations} />}
      {loading.shop ? <Skeleton /> : <ShopInfo data={shop} />}
    </div>
  );
}

骨架屏1消失 → 骨架屏2消失 → 骨架屏3消失 → 骨架屏4消失
(布局一直在跳动,体验很差)

function ProductPage() {
return (
    <div>
      <Suspense fallback={<ProductPageSkeleton />}>
        <ProductInfo />
        <Reviews />
        <Recommendations />
        <ShopInfo />
      </Suspense>
    </div>
  );
}

function ProductInfo() {
const product = use(fetchProduct()); // 数据准备好才渲染
return<div>{product.title}</div>;
}

function Reviews() {
const reviews = use(fetchReviews());
return<div>{reviews.map(...)}</div>;
}

完整的骨架屏 → (等待) → 完整的页面内容一次性出现!
(视觉稳定,体验流畅)

// 两个接口并行请求,但统一等待完成后才展示
<Suspense fallback={<PageSkeleton />}>
  <ComponentA />  {/* 调用API-1 */}
  <ComponentB />  {/* 调用API-2 */}
</Suspense>

// 核心内容优先展示,次要内容延迟加载
<Suspense fallback={<HeaderSkeleton />}>
  <Header />  {/* 快速接口,优先展示 */}
</Suspense>

<Suspense fallback={<ContentSkeleton />}>
  <MainContent />  {/* 慢速接口,独立加载 */}
</Suspense>

<ErrorBoundary fallback={<ErrorPage />}>
  <Suspense fallback={<Loading />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>

Step 1: 封装数据获取层
├─ 把所有fetch逻辑改为返回suspense-ready的promise
├─ 使用React.cache()做请求去重

Step 2: 改造组件层(自底向上)
├─ 叶子组件先迁移到use()
├─ 移除useState和useEffect
├─ 删除loading判断逻辑

Step 3: 添加Suspense边界
├─ 在合适的层级包裹<Suspense>
├─ 设计fallback组件
├─ 优化骨架屏展示策略

// ❌ 迁移前
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUsers().then(data => {
      setUsers(data);
      setLoading(false);
    });
  }, []);

if (loading) return<Spinner />;
return<div>{users.map(...)}</div>;
}

// ✅ 迁移后
function UserList() {
const users = use(fetchUsers()); // 就这么简单!
return<div>{users.map(...)}</div>;
}

// 在父组件包裹Suspense
<Suspense fallback={<Spinner />}>
<UserList />
</Suspense>

// ❌ 错误:每次渲染都创建新promise
function Component() {
const data = use(fetch('/api/data')); // 会导致无限重新渲染!
return<div>{data}</div>;
}

// ✅ 正确:promise应该在组件外部或使用React.cache()
const dataPromise = fetch('/api/data');
function Component() {
const data = use(dataPromise);
return<div>{data}</div>;
}

// 服务端会等待Suspense内容ready
<Suspense fallback={<Skeleton />}>
  <SlowComponent />  {/* 会阻塞服务端渲染 */}
</Suspense>

// 建议做好降级
<Suspense 
  fallback={isServer ? <StaticContent /> : <Skeleton />}
>
  <DynamicContent />
</Suspense>

// ❌ 不好:太多Suspense会导致瀑布流加载
<Suspense fallback={<Spinner1 />}>
<Component1 />
</Suspense>
<Suspense fallback={<Spinner2 />}>
<Component2 />
</Suspense>
<Suspense fallback={<Spinner3 />}>
<Component3 />
</Suspense>

// ✅ 更好:合理分组,统一加载
<Suspense fallback={<PageSkeleton />}>
<Component1 />
<Component2 />
<Component3 />
</Suspense>