React Suspense理解

文章索引

React.Suspense 是 React 提供的一个用于异步加载组件的工具，主要用于配合 lazy 或并发特性，实现代码分割和延迟渲染。

🧠 核心作用

Suspense 用来“等待”异步组件加载完成，再进行渲染。

🛠 使用场景一：代码分割（配合 React.lazy）

import React, { Suspense, lazy } from 'react'

const LazyComponent = lazy(() => import('./MyComponent'))

function App() {
  return (
    <div>
      <Suspense fallback={<div>加载中...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  )
}

import React, { Suspense, lazy } from 'react'

const LazyComponent = lazy(() => import('./MyComponent'))

function App() {

return (

<div>

</Suspense>

</div>

)

}

✅ 解释

React.lazy(() => import(...)) 是异步加载组件的方式（按需加载）
Suspense 包裹住懒加载的组件
fallback 属性是加载期间显示的内容（例如 loading 提示）

🔁 使用场景二：数据请求（配合 Concurrent 特性 / React Server Components）

这是 React 18 开始逐步支持的新特性，使用 Suspense 来延迟渲染直到数据准备好。

例如，使用第三方库（如 Relay 或 React Query 的 useSuspenseQuery）时：

<Suspense fallback={<Loading />}>
  <Profile />
</Suspense>

</Suspense>

Profile 中可能包含需要等待的异步数据请求，Suspense 会自动“暂停”渲染直到准备就绪。

✅ 小结 Suspense 的功能

功能	说明
🔄 延迟渲染	延迟渲染某些组件直到它们准备好（异步加载或异步数据）
🧩 代码分割	与 `React.lazy` 配合，实现按需加载组件
⏳ 占位符 UI	使用 `fallback` 显示 loading UI
🔗 并发渲染支持	为未来 React 并发特性（如 Streaming SSR、Server Components）提供支持

⚠️ 注意事项

Suspense 当前 不支持直接等待 Promise，必须配合特定的库或 React.lazy 使用
fallback 必须是 React 元素
多层嵌套时，内部 Suspense 会优先于外部处理 fallback 显示