前言
今日前端早读课文章由
KooFE前端团队翻译授权分享。正文从这开始~~
概述在React16.x版本中，我们基本支持了Suspense功能。但是，那时并没有完美支持Suspense，在我们的示例中有一些东西并未展示出来，比如延迟变化（解析数据完成之后进行状态转换）、占位符节流（限制嵌套和连续的占位符来减少UI抖动）和SuspenseList（调整列表或栅格组件，如按顺序流式处理）等。为了方便做区分，我们把React16和17版本中的Suspense称为LegacySuspense。
我们全套的Suspense功能依赖于ConcurrentReact，这些功能将会在React18版本里面支持。这意味着Suspense在React18中的工作方式与以前的版本会略有不同。从技术上来说，这是一个突破性的变化，但与自动批处理更新一样，预计会对现有代码的影响相对较小，并且不会对应用程序的迁移造成较大的负担。
本文主要讨论Suspense的行为差异——影响用户组件代码兼容性的部分。
术语说明这个功能本身仍然被称为"Suspense"
LegacySuspense和ConcurrentSuspense之间的区别只在迁移的背景下才重要。因为我们希望大多数人在升级时不会遇到任何重大障碍，所以在迁移场景之外，我们不会提到这些术语。
悬停组件的兄弟组件会被中断简单解释LegacySuspense和ConcurrentSuspense两者的基本的用户体验是一致的。在下面的代码示例中，组件ComponentThatSuspends在请求处理数据过程中，React会在它的位置上展示Loading组件：
Suspensefallback={Loading/}ComponentThatSuspends/Sibling//Suspense
两者的不同点主要体现在悬停组件(suspended