React18的SuspenseList有什么用途，能改写为长尾词吗？

本文共计1233个文字，预计阅读时间需要5分钟。

本篇文章带大家了解一下React 18中的SuspenseList，介绍其作用，希望对大家有所帮助！

+Suspense的前世今生这个特性在React历史版本中的首次出现是在16.6版本，首次发布了支持代码。

React 18中的SuspenseList：作用与介绍SuspenseList是React 18引入的一个新特性，它允许我们以更灵活的方式处理组件的加载和渲染。SuspenseList的作用是管理多个Suspense组件，使得它们可以并行加载，从而提高应用的性能。

具体来说，SuspenseList可以：

1. 并行加载多个组件，提高加载速度。

2.按需渲染组件，减少不必要的渲染。

3.提供更好的用户体验，避免长时间的白屏等待。

使用SuspenseList，我们可以这样写：

jsx

在这个例子中，`MyComponent`和`AnotherComponent`将并行加载，而加载过程中会显示相应的加载提示。

本篇文章带大家了解一下React18中的SuspenseList，介绍一下SuspenseList的作用，希望对大家有所帮助！

Suspense的前世今生

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

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 将显示列表中的所有 fallback

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

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

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

SuspenseList的作用

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

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

更多编程相关知识，请访问：编程视频！！

以上就是浅析React18中的SuspenseList，聊聊有什么用的详细内容，更多请关注自由互联其它相关文章！