Suspense是什么？

Suspense 是一种异步渲染机制，其核心理念是在组件加载或数据获取过程中，先展示一个占位符（loading state），从而实现更自然流畅的用户界面更新体验。

应用场景

• 异步组件加载：通过代码分包实现组件的按需加载，有效减少首屏加载时的资源体积，提升应用性能。
• 异步数据加载：在数据请求过程中展示优雅的过渡状态（如 loading 动画、骨架屏等），为用户提供更流畅的交互体验。
• 异步图片资源加载：智能管理图片资源的加载状态，在图片完全加载前显示占位内容，确保页面布局稳定，提升用户体验。

 用法

<Suspense fallback={<div>Loading...</div>}>
  <children />
</Suspense>

• fallback: 指定在组件加载或数据获取过程中展示的组件或元素
• children: 指定要异步加载的组件或数据

案例 

异步组件加载

创建一个异步组件

• src/components/Async/index.tsx

//AsyncComponent 组件
const AsyncComponent =()=> {
  return (
    <>
    <div>
      Async
    </div>
    </>
  )
}

export default AsyncComponent

使用lazy进行异步加载组件，使用Suspense包裹异步组件，fallback指定加载过程中的占位组件

import { lazy,Suspense } from 'react'
const AsyncComponent = lazy(()=> import('./components/Async')) 

function App() {
  return (
    <>
      111
        <Suspense fallback={<div>loading...</div>}>
          <AsyncComponent></AsyncComponent>
      </Suspense>
    </>
  )
}

export default App