浅析React18中的SuspenseList,聊聊有什么用
Suspense的前世今生
这个特性在React历史版本中的出现,第一次是16.6版本,发布了支持代码拆分的Suspense
组件。在16.9版本中继而支持了数据提取。感兴趣的同学可以移步React
的changeLOG
。【相关推荐:redis视频教程】
Suspense的简单使用
前文有介绍,我们仅用一个例子来温顾下概念和使用
// 这个组件是动态加载的const Othercomponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( React.Suspense fallback={ Spinner /> } > div> OtherComponent /> /div> /React.Suspense> ); }
在OtherComponent
组件尚不具备渲染条件的时候,会用fallback
传入的组件进行预制渲染。这边不具备渲染条件的具体表现就是数据获取时间较长,组件结构复杂等,但是不想因为这些影响应用的首屏渲染或者初始化,之前的Suspense
的文章有介绍,不再赘述。
什么是SuspenseList
从字面上的意思就能够简单的理解,就是如果我们的代码中有多个Suspense
存在,我们应该怎么控制它们的展示顺序和展示方式呢?由此React
官方给我们提供了SuspenseList
组件。
SuspenseList revealOrder="forwards"> Suspense fallback={ '加载中...'} > PRofilePicture id={ 1} /> /Suspense> Suspense fallback={ '加载中...'} > ProfilePicture id={ 2} /> /Suspense> Suspense fallback={ '加载中...'} > ProfilePicture id={ 3} /> /Suspense> .../SuspenseList>
我们首先介绍下SuspenseList
仅有的两个Props
revealOrder
表示的是子Suspense
的加载顺序,可选值有forwards
,backwards
,together
forwards
表示同一层次,从前往后展示,无论请求速度都是前面的先展示backwards
跟forwards相反together
表示所有suspense都准备好后同时显示,而不是一个个显示
tail
指定如何显示SuspenseList
中未加载项目的行为
默认情况下,
SuspenseList
将显示列表中的所有 fallbackcollapsed
仅显示列表中下一个 fallback
hidden
未加载的项目不显示任何信息
ps:SuspenseList
只对直接子层级的Suspense
或者SuspenseList
起作用,不会对孙子节点起作用。
SuspenseList的作用
SuspenseList
让我们可以对一组Suspense
的行为进行复合编排,虽然在演示中的demo相对比较简单,但是如果在一个比较大型的项目中,我们经常会使用Layout
进行布局。就拿我们常见的中后端管理平台来说和C端主体页面来举例。
中后端系统中,我们经常使用顶栏+侧边栏+主体页面的方式来布局,在这一层面目前业界,践行微前端的套路居多,比如qiankun.js
,包括笔者所在的团队,也探索了一套自己的微前端实现体系。如果在C端页面,采用微前端的方式可能未必合适,在页面中存在多区块渲染等需求上,利用SuspenseList
和Suspense
结合React后端渲染SSR的能力,就能够较系统的实现独立区块的加载顺序和行为的效果。
更多编程相关知识,请访问:编程视频!!
以上就是浅析React18中的SuspenseList,聊聊有什么用的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 浅析React18中的SuspenseList,聊聊有什么用
本文地址: https://pptw.com/jishu/593687.html