关于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函数重新渲染,后来就造成了这个抖动结果,那么怎么办呢

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

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

原文地址:https://www.cnblogs.com/cq1715584439/p/13935999.html