React 是一种流行的 JavaScript 库,用于构建用户界面。在大型应用程序中,将代码拆分成小块以提高性能和加载时间非常重要。React 有两个主要的解决方案来实现此目标:React.lazy()
和 react-loadable
。但是,自 React 16.6 版本起,一个新的 API 被引入了——React.Suspense
,它可以更好地管理代码拆分和延迟加载。
什么是 React.Suspense?
React.Suspense
是 React 16.6 中引入的新功能,它使得组件异步加载变得更加容易。通过在组件树中添加一个 Suspense
组件,React 可以暂停挂起渲染,直到所有异步操作都完成为止。这意味着您可以轻松地将所有异步加载的组件打包在一起,并在需要时进行加载。
为什么选择 React.Suspense?
相比之前的解决方案,React.Suspense
具有很多优点:
- 更简单:使用
React.Suspense
不需要任何额外的库或配置,只需使用原生的 React API 即可。 - 更直观:
React.Suspense
的 API 相对来说更加简洁和直观,不需要编写大量的代码。 - 更灵活:
React.Suspense
允许您混合同步和异步组件。这意味着,如果您的应用程序中只有部分组件需要异步加载,您可以仍然使用同步加载进行其余部分的开发。
如何使用 React.Suspense?
使用 React.Suspense
非常简单。以下是一个示例:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ----------- ---- ---------------- ------ -------------- ---- ------------------- -------- ----- - ------ - ----- ------ -------- --------- ------------------------- ---- ------------ -- ----------- ------ -- -
在此示例中,当 <MyComponent />
组件正在加载时,<Suspense>
组件将渲染 fallback
属性所指定的组件,即 <LoadingSpinner />
。一旦 <MyComponent />
加载完成,<Suspense>
将继续正常渲染 <MyComponent />
。
替换 react-loadable
相比之前的解决方案 react-loadable
,React.Suspense
更容易使用。
以下是一个使用 react-loadable
的示例:
-- -------------------- ---- ------- ------ -------- ---- ----------------- ----- ----------- - ---------- ------- -- -- ------------------------ -------- --------------- --- -------- ----- - ------ - ----- ------ -------- ------------ -- ------ -- -
在此示例中,MyComponent
是使用 Loadable
函数创建的。此函数将异步加载 <MyComponent />
并在加载时显示 loading
属性指定的组件。
以下是同样功能的示例代码,使用 React.Suspense
实现:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ----------- ---- ---------------- ------ -------------- ---- ------------------- -------- ----- - ------ - ----- ------ -------- --------- ------------------------- ---- ------------ -- ----------- ------ -- -
这里只需要使用一个 Suspense
组件即可完成与 react-loadable
相同的效果。
结论
React.Suspense
是 React 中新引入的功能,它可以更好地管理代码拆分和延迟加载。相比之前的解决方案,React.Suspense
更加简单、
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/50278