如何在React项目中实现loading

最新推荐文章于 2025-06-30 18:56:01 发布

转载最新推荐文章于 2025-06-30 18:56:01 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wanjubang/blog/1492122

文章标签：

#javascript #python #ViewUI

本文介绍了Web端不同层级加载动画的实现方式，包括页面级和组件级，并提供了基础版、标准版及典藏版的使用示例，展示了如何通过React结合Redux-Promise等工具进行集成。

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

2019独角兽企业重金招聘Python工程师标准>>>

如果在移动端的话，由于移动端操作相对比较单一，因此loading形式也比较简单。通常做法是在请求发出时页面正中位置弹出一个loading的 toast，请求结束隐藏 toast 。这种做法大家接受度比较高，实现起来也比较简单，就不赘述了。

接下来谈一下web端，由于pc强大的计算能力和相对大的屏幕，给用户很大的操作空间，因此出现了很多种loading状态。比如页面级别的loading（github顶部的loading bar），组件级别loading（比如一个按钮，一个placeholder）。

我们先来分析下需求：

1.我们希望可以控制loading 的时机。

2.我们希望新增一个loading需求，不需要写很多代码

3. 我们不希望保存loading这样的业务无关状态（状态最好都别保存）

使用起来大概是这样子的：

（页面级别，组件级别通用）

基础版：

<Loading

    isloading={props.isloading}

>

<HelloWorld>123</HelloWorld>

</Loading>

标准版：

可以根据请求自动loading，需要结合redux-promise等实现。

具体来说就是在请求是dispatch一个action:

{
 type:"xxx",
 payload: "xxxx",
 meta: {
   requestId: 233
 }
}

这样我们可以针对请求实现对应的loading （isloading 为true， requestId 不生效）

<Loading

    isloading={props.isloading}
    requestIds={[233,666,999]}

>

<HelloWorld>123</HelloWorld>

</Loading>

典藏版：

可以实现诸如顶部progress bar，菊花转动，自定义文字以及图标，显示百分比等功能（百分比基于requestsIds实现，效果更逼真，个人觉得比微信的逼真）

<Loading
    mode="overlay" // overlay (default)/ progress
    showPercents={true} // make sense only in progress mode (default is false)
    spining={true}
    icon={<Icon type="loading" />}
    isloading={props.isloading}
    requestIds={[233,666,999]}

>

<HelloWorld>123</HelloWorld>

</Loading>

具体实现呢？戳这里 https://github.com/azl397985856/react-loading/tree/master

转载于:https://my.oschina.net/wanjubang/blog/1492122