[JavaScript知识库]React_lazy使用-组件加载前loading做优雅降级

当我们在渲染页面时，毫无疑问，需要一个加载的动画，在页面没有完全渲染前，展示加载效果。

此时我们需要封装一个加载组件。

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，你无须超越谁，只要超越昨天的自己就好~