关于antd的Tabs标签切换动画抖动问题!全网独一份

  随手写了一个tabs切换  发现动画竟然抖动  于是一个小时的苦思冥想开始了

首先,习惯性打开百度去找  哈哈   没找到 

然后,不情愿的去排查是不是某些变量的刷新引起了页面的刷新,导致动画的抖动,于是就把useState变量换成了普通变量

此时 问题解决了 哈哈哈 

突然仔细一看页面不刷新了   卧槽  心好累   

仔细研究下发现react对自己的组件进行了缓存保留,在切换的时候只要渲染过一次后就不会重新去加载的

捡了芝麻丢了西瓜,又去解决  于是想起了组件的销毁来保证每次都在更新 

 <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="外呼一" key="1">
          {activeTab=="1"?<FormTable isVisible={isVisible} record={record} namespace={namespace} activeTab="1" />:null}
        </TabPane>
        <TabPane tab="外呼二" key="2">
          {activeTab == "2" ? <FormTable isVisible={isVisible} record={record} namespace={namespace} activeTab="2" /> : null}
        </TabPane>
</Tabs>

但是 此时发现页面的抖动还是存在的   what??为什么呢   后来发现是ajax引起的

在刚进入组件的生命周期去发送了请求 导致变量的修改致使render函数重新渲染,后来就造成了这个抖动结果,那么怎么办呢

将请求全部提出来  封装成纯组件 ,只有纯组件的情况才不会出现抖动,这也是官网没有出现抖动的原因

不给我点个赞对得起我的独一份吗哈哈 

  • 8
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嗨,玉麟

打赏19.88源码双手奉上

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值