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

博客介绍了在渲染页面时,通过封装加载组件和使用React.lazy函数实现组件懒加载的方法。React.lazy可动态引入组件,配合Suspense组件,利用fallback属性展示加载效果,还能包裹多个懒加载组件,完成加载成功展示页面的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值