React18中的SuspenseList有什么作用

本篇内容主要讲解“React18中的SuspenseList有什么作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React18中的SuspenseList有什么作用”吧!

十载的龙井网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整龙井建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“龙井网站设计”,“龙井网站推广”以来,每个客户项目都认真落实执行。

React18中的SuspenseList有什么作用

Suspense的前世今生

这个特性在React历史版本中的出现,第一次是16.6版本,发布了支持代码拆分的Suspense组件。在16.9版本中继而支持了数据提取。感兴趣的同学可以移步Reactchangelog

Suspense的简单使用

前文有介绍,我们仅用一个例子来温顾下概念和使用

// 这个组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    }>
      
               
       ); }

OtherComponent组件尚不具备渲染条件的时候,会用fallback传入的组件进行预制渲染。这边不具备渲染条件的具体表现就是数据获取时间较长,组件结构复杂等,但是不想因为这些影响应用的首屏渲染或者初始化,之前的Suspense的文章有介绍,不再赘述。

什么是SuspenseList

从字面上的意思就能够简单的理解,就是如果我们的代码中有多个Suspense存在,我们应该怎么控制它们的展示顺序和展示方式呢?由此React官方给我们提供了SuspenseList组件。


  
    
  
  
    
  
  
    
  
  ...

我们首先介绍下SuspenseList仅有的两个Props

revealOrder 表示的是子Suspense的加载顺序,可选值有forwardsbackwardstogether

  • forwards表示同一层次,从前往后展示,无论请求速度都是前面的先展示

  • backwards跟forwards相反

  • together表示所有suspense都准备好后同时显示,而不是一个个显示

tail指定如何显示SuspenseList中未加载项目的行为

  • 默认情况下,SuspenseList 将显示列表中的所有 fallback

  • collapsed 仅显示列表中下一个 fallback

hidden 未加载的项目不显示任何信息

ps:SuspenseList只对直接子层级的Suspense或者SuspenseList起作用,不会对孙子节点起作用。

SuspenseList的作用

SuspenseList让我们可以对一组Suspense的行为进行复合编排,虽然在演示中的demo相对比较简单,但是如果在一个比较大型的项目中,我们经常会使用Layout进行布局。就拿我们常见的中后端管理平台来说和C端主体页面来举例。

React18中的SuspenseList有什么作用

React18中的SuspenseList有什么作用

中后端系统中,我们经常使用顶栏+侧边栏+主体页面的方式来布局,在这一层面目前业界,践行微前端的套路居多,比如qiankun.js,包括笔者所在的团队,也探索了一套自己的微前端实现体系。如果在C端页面,采用微前端的方式可能未必合适,在页面中存在多区块渲染等需求上,利用SuspenseListSuspense结合React后端渲染SSR的能力,就能够较系统的实现独立区块的加载顺序和行为的效果。

到此,相信大家对“React18中的SuspenseList有什么作用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


网站名称:React18中的SuspenseList有什么作用
本文来源:http://scyanting.com/article/ggcded.html