關於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函數重新渲染，后來就造成了這個抖動結果，那么怎么辦呢

將請求全部提出來  封裝成純組件 ，只有純組件的情況才不會出現抖動，這也是官網沒有出現抖動的原因

 

不給我點個贊對得起我的獨一份嗎哈哈