使用React.Suspense显示loading效果

最新推荐文章于 2024-07-15 15:51:13 发布

gtLBTNq9mr3

最新推荐文章于 2024-07-15 15:51:13 发布

阅读量935

点赞数

640?wx_fmt=png

1.<React.Suspense>需要和React.lazy()配合使用2.React.lazy()需要和import()动态引入语法配合使用3.不能在服务端渲染使用

在组件没有加载出来的时候显示loading效果，加载完成之后正常显示。

import React from 'react';	

	
const OtherComponent = React.lazy(() =&gt; import('./OtherComponent.js'));	

	
function MyComponent (params) {	
  return (	
    &lt;div&gt;	
      &lt;React.Suspense fallback={&lt;div&gt;Loading&lt;/div&gt;}&gt;	
        &lt;OtherComponent /&gt;	
      &lt;/React.Suspense&gt;	
    &lt;/div&gt;	
  )	
}	
export default MyComponent

React.lazy 接受一个函数，这个函数需要动态调用 import()。

它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

import React, { Component } from 'react';	

	
class OtherComponent extends Component {	
  render() { 	
    return (	
      &lt;div&gt;	
        hello world	
      &lt;/div&gt;	
    );	
  }	
}	

	
export default OtherComponent; // 必须是默认导出

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。

你可以将 Suspense 组件置于懒加载组件之上的任何位置。

你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

完

640?wx_fmt=png