)}Toast.propTypes={type:PropTypes.oneOf(['loading','success','fail']),message:PropTypes.string}exportdefaultToasttoast.module.css:root{--toastSize:136px;--containerSize:40px;}.toast{宽度:var(--toastSize);高度：var(--toastSize);位置：固定；顶部：计算（50vh-var（--toastSize）/2）；左：计算（50vw-var（--toastSize）/2）；背景：#4C4C4C；边界半径：12px；显示：弹性；弹性方向：列；对齐项目：居中；证明内容：居中；颜色：rgba(255,255,255,.9);}.container{宽度：var(--containerSize);显示：继承；弹性方向：继承；对齐项目：继承；margin:0auto16px;}.container>svg{height:var(--containerSize);}.loading{animation:rotatelinear1sinfinite;}@keyframesrotate{from{transform:rotate(0);}到{变换：旋转te(360度);}}使用路由加载的主要应用场景是页面切换。使用lazy()和Suspense配合ReactRouter实现页面切换时显示新页面加载：//index.jsimport{Suspense,lazy}from'react'import{createRoot}from'react-dom/client'import{BrowserRouter,Routes,Route}from'react-router-dom'importToastfrom'./components/toast/Toast'constHome=lazy(()=>import('./routes/Home'))constAbout=lazy(()=>import('./routes/About'))constcontainer=document.getElementById('root')constroot=createRoot(container)root.render(}>}/>}/>)但是，目前的组合有一个致命的缺陷：当新组件还没有加载完时，旧组件已经隐藏起来，无论新组件加载多快，Suspense的回退都会执行，这会导致闪烁切换页面。虽然官方推出的startTransition()解决了闪烁的问题，但是这个方案还不适用于路由。所以在实践中不推荐这种组合，因为以页面闪烁为代价来实现加载是得不偿失的。TransitionReact新加入的useTranstion()Hook，结合useState()，实现动态组件加载时的加载显示。从'react'导入{useEffect，useState，useTransition}从'../../configuration'导入{url}从'../../../components/toast/Toast'导入表'。./../../components/table/Table'exportdefaultfunctionUser(){const[res,setRes]=useState({})const[loading,startTransition]=useTransition()//loading表示转场任务等待状态useEffect(()=>{fetch(`${url}`,{method:'GET'}).then(r=>r.json()).then(d=>{if(d.hasOwnProperty('err'))alert(`${d.text}:${d.err}`)elseif(d.hasOwnProperty('data'))startTransition(()=>{setRes(d)})//将setRes()标记为过渡任务}).catch(e=>{alert(e)})},[])return()}useTransition()几乎可以涵盖大部分的加载场景，因为在React中，组件的更新基本都是通过在useEffect()的依赖数组中添加state来实现的。总结基于官方支持的永不重新打包的原则，加载需求基本完成，后续开发如果有新的收获，我们会再次同步。如有不足，敬请指正。