react-dva-antd实现页面loading加载效果(首屏优化)

1、预期需要实现效果:

众所周知,第一次打开SPA应用的时候,如果你的项目够大,那么首次加载资源时,会非常的久。由于资源没有加载完毕,界面的DOM也不会渲染,会造成白屏的问题。用户此时并不知道是加载的问题,所以会带来一个不好的体验。因此通常会在public下写一个加载动画,告诉用户,网页在加载中这个提示。当页面加载成功后,页面渲染出来的这一个体验比白屏等开机要好太多了。

2、
在我们渲染表格数据的时候,当表格数据改变的时候我们出现加载效果。非使用Spin组件。当接口在调用的时候,我们去控制loading效果。所以我们在models实现。
使用到的是Table中的loading属性。
在这里插入图片描述
在这里插入图片描述
2、直接贴出代码

	loading: true,  =>state


====>effects
  // 查询班级出勤统计数据单天
    *inqui..........({ payload }, { call, put }) {
      yield put({
        type: 'changeLoading',
        payload: true,
      });
      const response = yield call(inqui......, payload);
      yield put({
        type: 'getAllSingle',
        payload: {
          allClassSingleList: response.datas,
        },
      });
      yield put({
        type: 'changeLoading',
        payload: false,
      });
    },
====>reducers
  changeLoading(state, action) {
      return {
        ...state,
        loading: action.payload,
      };
    },
在上面的代码中,在接口调用之前将初始值置为true, 当接口调用完全之后再置为false。

3、页面使用不再讲述。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值