解决AntDesignTabs切换时的动画抖动问题

在日常开发中，我使用Ant Design的Tabs组件实现了一些基本功能，但不幸的是，我发现当切换标签时，动画会出现明显的抖动现象。这不仅影响用户体验，也让我感到非常困惑。

起初，我尝试通过搜索引擎寻找解决方案，但并未找到相关答案。无奈之下，我决定自己动手解决问题。首先，我怀疑是某些状态变量的频繁更新导致了页面的重绘，从而引起动画抖动。因此，我尝试将使用React的useState管理的状态变量改为普通的Javascript变量，以减少不必要的渲染。

这一改变确实解决了动画抖动的问题，但同时也带来了新的问题——页面不再响应状态的变化。经过一番调试，我发现React对已渲染过的组件进行了缓存处理，避免了重复加载，但这显然不是我想要的效果。

为了解决这个问题，我考虑到了组件的卸载机制，确保每次切换标签时都能触发组件的重新加载。具体的代码调整如下：

  
    {activeTab === "1" && }
  
  
    {activeTab === "2" && }
  

尽管如此，页面仍然存在抖动现象。进一步调查后，我发现问题出在AJAX请求上。在组件初次加载时，会发送网络请求获取数据，这些数据的更新会触发组件的重新渲染，进而导致动画抖动。为了解决这一问题，我将所有涉及网络请求的部分封装成了纯组件，确保它们在数据不变的情况下不会重新渲染。这也解释了为什么官方示例中未出现类似问题。

希望我的经验能帮助遇到同样问题的开发者们。如果你觉得这篇文章对你有帮助，不妨点个赞支持一下吧！