React中使用Suspense

疑问

问：React Suspense有什么用呢？

答：在动态导入的帮助下，React Suspense让我们轻松定义延迟加载的组件。

 

代码demo

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

文章就分享到这，欢迎关注“前端大神之路”