如何在React项目中实现loading

如果在移动端的话，由于移动端操作相对比较单一，因此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,999]}

>

<HelloWorld>123</HelloWorld>

</Loading>

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

如何在React项目中实现loading

相关文章