淘宝店购买网站,建设部网站注册查询,服装移动网站策划案,河南建设监理协会新网站Suspense
Suspense 是一种异步渲染机制#xff0c;其核心理念是在组件加载或数据获取过程中#xff0c;先展示一个占位符#xff08;loading state#xff09;#xff0c;从而实现更自然流畅的用户界面更新体验。
应用场景 异步组件加载#xff1a;通过代码分包实现组件…Suspense
Suspense 是一种异步渲染机制其核心理念是在组件加载或数据获取过程中先展示一个占位符loading state从而实现更自然流畅的用户界面更新体验。
应用场景 异步组件加载通过代码分包实现组件的按需加载有效减少首屏加载时的资源体积提升应用性能。 异步数据加载在数据请求过程中展示优雅的过渡状态如 loading 动画、骨架屏等为用户提供更流畅的交互体验。 异步图片资源加载智能管理图片资源的加载状态在图片完全加载前显示占位内容确保页面布局稳定提升用户体验。
用法
Suspense fallback{divLoading.../div}AsyncComponent /
/Suspense入参:
fallback: 指定在组件加载或数据获取过程中展示的组件或元素children: 指定要异步加载的组件或数据
案例
异步组件加载
创建一个异步组件
src/components/Async/index.tsx
export const AsyncComponent () {return divAsync/div
}export default AsyncComponentsrc/App.tsx
使用lazy进行异步加载组件使用Suspense包裹异步组件fallback指定加载过程中的占位组件
import React, { useRef, useState, Suspense,lazy } from react;
const AsyncComponent lazy(() import(./components/Async))
const App: React.FC () {return (Suspense fallback{divloading/div}AsyncComponent //Suspense/);
}export default App;效果如下: 可以将网络调整到慢速可以看到loading效果 异步数据加载
我们实现卡片详情在数据加载过程中展示骨架屏数据加载完成后展示卡片详情。 建议升级到React19, 因为我们会用到一个use的API, 这个API在React18中是实验性特性在React19纳入正式特性 模拟数据,我们放到public目录下, 方便获取直接(通过地址 文件名获取) 例如:
http://localhost:5173/data.json
public/data.json
{data:{id:1,address:北京市房山区住岗子村10086,name:小满,age:26,avatar:https://api.dicebear.com/7.x/avataaars/svg?seed小满}
} 创建一个骨架屏组件用于在数据加载过程中展示提升用户体验,当然你封装loading组件也是可以的。
src/components/skeleton/index.tsx
import ./index.css
export const Skeleton () {return div classNameskeletonheader classNameskeleton-headerdiv classNameskeleton-name/divdiv classNameskeleton-age/div/headersection classNameskeleton-contentdiv classNameskeleton-address/divdiv classNameskeleton-avatar/div/section/div
}.skeleton {width: 300px;height: 150px;border: 1px solid #d6d3d3;margin: 30px;border-radius: 2px;
}.skeleton-header {display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #d6d3d3;padding: 10px;
}.skeleton-name {width: 100px;height: 20px;background-color: #d6d3d3;animation: skeleton-loading 1.5s ease-in-out infinite;
}.skeleton-age {width: 50px;height: 20px;background-color: #d6d3d3;animation: skeleton-loading 1.5s ease-in-out infinite;
}.skeleton-content {display: flex;justify-content: space-between;align-items: center;padding: 10px;
}.skeleton-address {width: 100px;height: 20px;background-color: #d6d3d3;animation: skeleton-loading 1.5s ease-in-out infinite;
}.skeleton-avatar {width: 50px;height: 50px;background-color: #d6d3d3;animation: skeleton-loading 1.5s ease-in-out infinite;
}keyframes skeleton-loading {0% {opacity: 0.6;}50% {opacity: 1;}100% {opacity: 0.6;}
}创建一个卡片组件用于展示数据这里面介绍一个新的API use
use API 用于获取组件内部的Promise,或者Context的内容该案例使用了use获取Promise返回的数据并且故意延迟2秒返回模拟网络请求。
src/components/Card/index.tsx
import { use } from react
import ./index.css
interface Data {name: stringage: numberaddress: stringavatar: string
}const getData async () {await new Promise(resolve setTimeout(resolve, 2000))return await fetch(http://localhost:5173/data.json).then(res res.json()) as { data: Data }
};const dataPromise getData();const Card: React.FC () {const { data } use(dataPromise);return div classNamecardheader classNamecard-headerdiv classNamecard-name{data.name}/divdiv classNamecard-age{data.age}/div/headersection classNamecard-contentdiv classNamecard-address{data.address}/divdiv classNamecard-avatarimg width{50} height{50} src{data.avatar} alt //div/section/div;
};export default Card;.card {width: 300px;height: 150px;border: 1px solid #d6d3d3;margin: 30px;border-radius: 2px;
}.card-header {display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #d6d3d3;padding: 10px;
}.card-age {font-size: 12px;color: #999;
}.card-content {display: flex;justify-content: space-between;align-items: center;padding: 10px;
}使用方式如下: 通过Suspense包裹Card组件fallback指定骨架屏组件
src/App.tsx
import React, { useRef, useState, Suspense,lazy } from react;
import Card from ./components/Card
import { Skeleton } from ./components/Skeleton
const App: React.FC () {return (Suspense fallback{Skeleton /}Card //Suspense/);
}export default App;效果如下:
