1. 封装加载组件

components/Loading/index.js

import './index.scss'
function Loading(props) {let loadingText = props.text || '数据加载中，请稍后.....'return (<div className="loading">// 加载动画icon<img className='loading_pic' src={require('../../assets/images/loading.png')} alt=""/>// loading文案 未传入则展示默认值<span className='loading_text'>{loadingText}</span></div>)
}export default Loading

components/Loading/index.scss

.loading {margin: 30vh auto 0;display: flex;justify-content: center;align-items: center;&_pic {display: inline-block;width: 48px;height: 48px;margin-right: 8px;}&_text {color: #333;font-size: 18px;}
}

2. 在页面中React.lazy引入某组件

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。
使用方式 React.lazy(() => import(A组件地址))
此代码将会在组件首次渲染时，自动导入包含 A组件的包。
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

import React, { Component, Suspense } from 'react'
import Loading from '../../components/Loading'
const ArticleList = React.lazy(() => import('./components/ArticleList'))export default class MyArticle extends Component {render() {return (<div className='article_container'><Suspense fallback={<Loading text="加载中..." />}><ArticleList list={this.state.list} /></Suspense></div>)}
}

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

这样我们就可以在页面中看到是先进行了一个loading的效果，之后才会渲染我们想要的组件，完成了一个加载成功展示页面的过程。

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。方法相同：
- 通过React.lazy方式引入多个组件
- Suspense中放置多个组件即可

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

React_lazy使用-组件加载前loading做优雅降级相关推荐

js在html之前加载,js加载前显示loading（页面加载前）
工作中遇到,需要加loading.1.用jquery的load方法读取页面,页面读取完成前显示loading.2.首页js等加载过慢,页面加载完成前显示loading. (1).jquery .loa ...
【转载】使用Imaging组件加载GIF动画
Mobil手机加载GIF动态图像的方法有两种,一个就是使用GIF89a标准算法,另一个就是使用SDK自带的Imaging组件,这两种方法是很典型的手机图像处理技术的实践.使用Imaging组件加载GI ...
Ogre 编辑器二(用Ogre的地形组件加载天龙八部地形)
主界面如上文设计完成后,场景刚开始添加了是Ogre例子里的,发现场景里实物太少,于是想到直接把天龙的场景拿下来,天龙网上有源码,参考了下,把天龙的地形用Ogre的地形组件完成了下,如下是效果图: 因为 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
cocos2d-x游戏开发(十五)游戏加载动画loading界面
个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...
【es】es Plugin 组件加载 PluginsService
1.概述转载并且补充:［9］elasticsearch源码深入分析--Plugin组件加载 2.开篇本篇开始将会详细解释Node实例化的过程中PluginsService的相关内容,PluginS ...
vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
C# OpenCV人脸检测(三) DNN加载FaceDetectorYN模型做人脸检测
点击下方卡片,关注"OpenCV与AI深度学习"公众号视觉/图像重磅干货,第一时间送达本文作者Color Space,文章未经作者允许禁止转载! 本文将介绍C# OpenCV人 ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...

React_lazy使用-组件加载前loading做优雅降级

1. 封装加载组件

2. 在页面中React.lazy引入某组件

如果有用，点个赞呗~

React_lazy使用-组件加载前loading做优雅降级相关推荐

最新文章

热门文章