随手写了一个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函数重新渲染,后来就造成了这个抖动结果,那么怎么办呢
将请求全部提出来 封装成纯组件 ,只有纯组件的情况才不会出现抖动,这也是官网没有出现抖动的原因
不给我点个赞对得起我的独一份吗哈哈