如何在React项目中实现loading

前端之家收集整理的这篇文章主要介绍了如何在React项目中实现loading前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

我们先来分析下需求:

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

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

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

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

页面级别,组件级别通用)

基础版:

  1. <Loading
  2.  
  3. isloading={props.isloading}
  4.  
  5. >
  6.  
  7. <HelloWorld>123</HelloWorld>
  8.  
  9. </Loading>

标准版:

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

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

  1. {
  2. type:"xxx",payload: "xxxx",Meta: {
  3. requestId: 233
  4. }
  5. }

这样我们可以针对请求实现对应的loading(isloading 为true, requestId 不生效)

  1. <Loading
  2.  
  3. isloading={props.isloading}
  4. requestIds={[233,666,999]}
  5.  
  6. >
  7.  
  8. <HelloWorld>123</HelloWorld>
  9.  
  10. </Loading>

典藏版:

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

  1. <Loading
  2. mode="overlay" // overlay (default)/ progress
  3. showPercents={true} // make sense only in progress mode (default is false)
  4. spining={true}
  5. icon={<Icon type="loading" />}
  6. isloading={props.isloading}
  7. requestIds={[233,999]}
  8.  
  9. >
  10.  
  11. <HelloWorld>123</HelloWorld>
  12.  
  13. </Loading>

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

猜你在找的React相关文章