缓存页面是个table 数据100条时 切换很卡顿 有什么优化的手段吗

[lihuan-bot]

No description provided.

[CJY0208]

提供个思路，可以尝试利用缓存生命周期，在缓存时清空表格数据，缓存恢复后还原表格数据，减少 dom 数量

[lihuan-bot]

const refDataSource = useRef<IIntelligenceListItem[]>([]);
useActivate(() => {
setDataSource(refDataSource.current);
});
useUnactivate(() => {
refDataSource.current = dataSource;
setDataSource([]);
});

这样还是很卡顿

[CJY0208]

可能得看看能不能换成虚拟列表

[lihuan-bot]

之前用的react17升级到18之后 100条数据就不卡顿了 但是切换tab时样式会变化

不知道是不是 antd button 的问题

[JokerAn]

遇到了同样的问题；已经用骚操作解决了；具体代码如下：
function addStyle(styleStr = ';', className = '') {
var style = document.createElement('style');
style.className = className;
style.appendChild(document.createTextNode(styleStr));
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
addStyle(.ant-btn-loading-icon>span{display:none!important}, 'anRemoveBtnLoading');
requestAnimationFrame(() => {
let anRemoveBtnLoading: any = document.querySelector('.anRemoveBtnLoading');
anRemoveBtnLoading?.parentNode.removeChild(anRemoveBtnLoading);
});
解释一下：经过研究发现react18+最新的antd 配置这个缓存插件会出现 返回后页面如果有antd的button组件会莫名的先执行一个loading动画然后会自动取消 因为执行了loading动画所以按钮给撑大了导致页面布局错误，等loading消失 页面布局又正常了，上述代码的含义为：激活的瞬间添加了一段css用于隐藏loading图标 然后在瞬间给取消这个临时css

[CJY0208]

@JokerAn @lihuan-bot
Loading 问题的核心原因、方案，我前几天写在这儿了，可以看看有没有帮助
#225 (comment)

[JokerAn]

确实解决了，至于性能的下降，目前并未感觉到，nice