React中Suspense和lazy的使用
原创
React中Suspense和lazy的使用
原创
挥刀北上
修改于 2021-11-01 15:35:09
修改于 2021-11-01 15:35:09
代码可运行
运行总次数：0
代码可运行
何时使用lazy函数，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度。
lazy函数可以单独使用，但是在加载组件时候，页面可能会出现空白，此时需要添加loading，这时就需要suspense了，代码如下：
const Foo = React.lazy(() => import('../componets/Foo));
<Foo />上面的代码直接在函数中使用Foo组件页面加载时会出现白屏，所以需要suspense来包裹，代码如下：
<React.Suspense fallback={<div>loading...</div>}>
<Foo/>
</React.Suspense>例子2：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
OtherComponent是通过懒加载加载进来的，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。在<OtherComponent />外面使用Suspense标签，并在fallback中声明OtherComponent加载完成前做的事，即可优化整个页面的交互
fallback属性接受任何在组件加载过程中你想展示的 React 元素。你可以将Suspense组件置于懒加载组件之上的任何位置。你甚至可以用一个Suspense组件包裹多个懒加载组件。
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
