React18的SuspenseList有何实用价值？浅析其应用场景。

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

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

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

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

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

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

// 这个组件是动态加载的 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <React.Suspense fallback={<Spinner />}> <div> <OtherComponent /> </div> </React.Suspense> ); }

在OtherComponent组件尚不具备渲染条件的时候，会用fallback传入的组件进行预制渲染。