[功能]: 多页签切换可以保留状态

[xiaochong444]

描述

当前多页签切换数据会丢，失去了多页签的意义

建议的解决方案

多页签切换时保留状态

替代方案

No response

额外的上下文

No response

[mufeng889]

react并没有vue的keepalive功能 市面上有类似且比较适合的有一个react-activation https://github.com/CJY0208/react-activation
但是和antd搭配并不是很友好 我不太习惯用react废弃或者将要废弃的api 你可以选择自己适配或者等待 react官方有一个离屏渲染的概念 已经从发布要搞到现在已经4年多了

[xiaochong444]

@mufeng889 可以不引用那个，参考下面这个实现
https://github.com/d3george/slash-admin/tree/main

[mufeng889]

有空再搞吧 记一下 目前没有时间 顺便帮忙点个start 谢谢

[xiaochong444]

收到，感谢老佬无私的奉献

[mufeng889]

今天细看了一下这个 框架实现 keep-alive的方法 利用Tab这个组件 来实现页面之间的 跳转 其结果就是 在页面切换之后 dom并没有被销毁还是在原来的位置 只是新增了 然后把原来的给隐藏掉 就是利用 display none 随着页面被打开的真实dom会越来越多 真时候去 交互一些全局性的行为 是会造成卡顿的 不考虑用这个框架的实现 方法 会想其他办法

[mufeng889]

不考虑添加这个功能:
1.上面的实现方式是 把路由匹配到的页面组件 当做tab的children去渲染 会导致没有关闭的tab选项卡的实际页面组件的真实dom一直存于页面当中没有被销毁，这里讲的不是虚拟和真实dom谁更好，而是真实dom一直存在于页面当中 导致再有全局性的操作时 会随着真实dom的增多而造成卡顿 特别是我用了startViewTransition这个api在亮色和黑色切换时巨卡
2. 市面上的react缓存的插件，都不可避免的在操作真实dom渲染到某个位置，因为react的本质上是一个函数在被重新渲染的时候必然会重新创建所有的变量和函数 ，而且我用的是数据路由器 是react-router的最新版本支持了很多强大的特性 ，这和市面上的缓存组件并不能兼容
3. 我的意见是等待官方出 因为我用的都是react相关的最前沿技术 不会为了某个特性去特意不用react相关的前沿技术