react中Suspense的使用详解

2019-11-19 10:55:57

字体：大中小

来源：转载

供稿：网友

关于Suspense的使用，先来看下示例代码

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> );}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue中的v-if和v-show的区别详解

下一篇：vue 实现微信浮标效果