首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用React.Suspense显示loading效果

使用React.Suspense显示loading效果

原创
作者头像
Qiang
发布2019-08-15 22:35:34
2.3K0
发布2019-08-15 22:35:34
举报
文章被收录于专栏:前端精髓前端精髓
  1. <React.Suspense>需要和React.lazy()配合使用
  2. React.lazy()需要和import()动态引入语法配合使用
  3. 不能在服务端渲染使用

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

import React from 'react';

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

function MyComponent (params) {
  return (
    <div>
      <React.Suspense fallback={<div>Loading</div>}>
        <OtherComponent />
      </React.Suspense>
    </div>
  )
}
export default MyComponent

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

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

import React, { Component } from 'react';

class OtherComponent extends Component {
  render() { 
    return (
      <div>
        hello world
      </div>
    );
  }
}

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

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

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档