React18의 SuspenseList에 대한 간략한 분석과 그 용도-JS 튜토리얼-php.cn

React18의 SuspenseList에 대한 간략한 분석과 그 용도

青灯夜游

풀어 주다： 2022-06-29 21:05:15

앞으로

3199명이 탐색했습니다.

이 글은 React18의 SuspenseList를 이해하고 SuspenseList의 기능을 소개하는 글입니다. 모든 분들께 도움이 되길 바랍니다!

React18의 SuspenseList에 대한 간략한 분석과 그 용도

Suspense의 과거와 현재

이 기능은 React의 이전 버전에서 처음 등장했는데, 코드 분할을 지원하는 Suspense 구성 요소가 출시되었습니다. 이제 버전 16.9에서 데이터 추출이 지원됩니다. 관심 있는 학생들은 React의 changelog로 이동하세요. [관련 추천 : Suspense组件。在16.9版本中继而支持了数据提取。感兴趣的同学可以移步React的changelog。【相关推荐：Redis视频教程】

Suspense的简单使用

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

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

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

로그인 후 복사

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

什么是SuspenseList

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

<SuspenseList revealOrder="forwards">
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={&#39;加载中...&#39;}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

로그인 후 복사

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

revealOrder 表示的是子Suspense的加载顺序，可选值有forwards，backwards，together

forwards表示同一层次，从前往后展示，无论请求速度都是前面的先展示
backwards跟forwards相反
together表示所有suspense都准备好后同时显示，而不是一个个显示

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

默认情况下，SuspenseList 将显示列表中的所有 fallback
collapsed 仅显示列表中下一个 fallback

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

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

SuspenseList的作用

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

React18의 SuspenseList에 대한 간략한 분석과 그 용도

中后端系统中，我们经常使用顶栏+侧边栏+主体页面的方式来布局，在这一层面目前业界，践行微前端的套路居多，比如qiankun.js，包括笔者所在的团队，也探索了一套自己的微前端实现体系。如果在C端页面，采用微前端的方式可能未必合适，在页面中存在多区块渲染等需求上，利用SuspenseList和SuspenseRedis 영상 튜토리얼

]