持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

suspense

上一篇我们说到，lazy和create Resource可以单独作为异步使用，但是solid还提供了另外一种机制来协调多个异步事件的显示。可以在未完成时展示符合我们需要的内容。

suspense可以通过消除中间状态和加载状态消除用户的感觉到的卡顿现象。 suspense自动监测所有子级异步读取并相应地采取行动，你可以根据需要嵌套尽可能多的suspense组件。

如：

<> <h1>Welcome</h1> <Suspense fallback={<p>Loading...</p>}> <Greeting name="Jake" /> </Suspense> </>

需要注意的是。触发suspense的异步派生值的读取。不是异步获取行为的本事。如果在suspense边界下未读取资源signal（包括lazy组件），suspense将不会挂起。

严格来说，suspense只是渲染两个分支的show组件。

suspense List

在特定的场景下，需要协调多个suspense组件。

1.将所有内容都放在一个suspense下，但是这些会将子组件限制成单一的加载行为。单一的回退状态意味着一切都需要等到最后一件事被加载。所以solid提供suspenseList组件来协调这些组件。 如：

<SuspenseList revealOrder="forwards" tail="collapsed"> <ProfileDetails user={props.user} /> <Suspense fallback={<h2>Loading posts...</h2>}> <ProfileTimeline posts={props.posts} /> </Suspense> <Suspense fallback={<h2>Loading fun facts...</h2>}> <ProfileTrivia trivia={props.trivia} /> </Suspense> </SuspenseList>

在这个例子中，会含有多个suspense组件。如果我们将suspenseList的revealOrder属性配置为forwards包裹内容，子组件将按照它们在书中出现的顺序呈现，而不管它们的加载的顺序。这减少了页面跳转。你可以将revealOrder设置为back wards或者together，backwards 将反转组件展示顺序，together 则会等待所有 Suspense 组件加载完毕。此外，还有一个 tail 选项可以设置为 hidden 或 collapsed。这会覆盖显示所有回退的默认行为，要么不显示，要么显示按照 revealOrder 设置的方向显示下一个。