React Suspense 数据获取模式

Suspense 统一了异步 UI 状态管理，但需要数据层协作。

核心概念

• 资源读取需要抛出 Promise，配合 Suspense 边界显示占位。
• ErrorBoundary 管理错误 fallback，保证用户体验。
• 结合第三方库（React Query/SWR）可直接使用 Suspense。

实战步骤

• 封装资源工厂：createResource(asyncFn) 返回 read API。
• 按页面拆分 Suspense 边界，减少全局 loading 闪烁。
• 用 startTransition 区分优先级，避免阻塞输入。

进阶建议

• 在 RSC 中直接返回数据，客户端组件读取缓存。
• 结合 streaming SSR，让 fallback 迅速返回。
• 使用 profiling 记录 Suspense 的等待时间。

代码示例

const resource = createResource(fetchUser)

function UserProfile() {
  const user = resource.read()
  return <div>{user.name}</div>
}

小结

通过以上实践，{article['title']} 能确保 React 项目在扩展与运维阶段保持高质量。