本篇文章带大家了解一下React18中的SuspenseList，介绍一下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
tail指定如何显示SuspenseList中未加载项目的行为
hidden 未加载的项目不显示任何信息
ps：SuspenseList只对直接子层级的Suspense或者SuspenseList起作用，不会对孙子节点起作用。
SuspenseList的作用
SuspenseList让我们可以对一组Suspense的行为进行复合编排，虽然在演示中的demo相对比较简单，但是如果在一个比较大型的项目中，我们经常会使用Layout进行布局。就拿我们常见的中后端管理平台来说和C端主体页面来举例。
| 请您注册登录超级码客，加载全部码客文章内容... |