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

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

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

  • 相关阅读:
    C#中 Thread,Task,Async/Await,IAsyncResult 的那些事儿!
    Java8的新特性以及与C#的比较
    点旋转坐标变换
    vc++返回模块路径
    为什么不要 "lock(this)" ? lock object 并是readonly(转载)
    《黄帝内经》要义
    C++多线程编程简单实例
    c++ 获取文件大小
    c# 获取文件夹大小
    自动驾驶仿真工具的下载与安装
  • 原文地址:https://www.cnblogs.com/cq1715584439/p/13935999.html
Copyright © 2011-2022 走看看