React实现数据驱动的tab页缓存

Posted 2023-04-30

参考技术A 在开发后台管理页面的时候，会遇到缓存Tab页面数据的需求。在开发时也希望能够使用数组驱动的方式控制Tab页的缓存，并且使用API进一步控制tab页缓存或者其他页缓存。
之前关注的开发者新写了一个模块，正好满足了我的需求
react-activation: https://github.com/CJY0208/react-activation
原理应该是把Alive组件下的dom挂载到Provider组件的display:none的一个节点，当路由切回来时，在从provider中找之前挂在的alive dom。作者已经帮我们实现了，用就是了。

使用react-activation提供的KeepAlive组件包裹你的页面组件，控制KeepAlive的when值
作者提供了demo： 可关闭的路由 tabs 示例
但这个是API控制的，我更希望使用一个[]数据来驱动tabs和页面缓存

使用redux管理这个数据，建立了一个tabs数组，我希望tabs和页面是否被缓存，都是响应这个数组。
我写了2个action去操作这个tabs,新增,和删除

然后我希望redux中的tabs的变化，能触发我的视图更新，用React-Redux提供的connect将store中的tabs绑定到组件上。当tabs发生变化时，我的缓存组件就能响应到，从而改变keepAlive的when值，实现缓存控制

当组件已经能响应tabs的变化时，添加更多功能【关闭/关闭其他/关闭到右侧/关闭全部】，通过写不同的action操作tabs数组就可以了

react + tabs 切换有缓存不重新发起请求

参考技术A 可以看到当tab 切换的时候我有个change 事件

在子组件内部 我做了个处理

这样 每当切换的时候 就会有一个 不同的key 传下去 一对比 再次发起请求就好啦

下面进行一个优化
因为我这个内部组件是循环得到的

因此我每次循环都会有个对比 而组件内部就会有个不同的key 做比较 我循环多少次 其实组件就发送了多少个请求 这明显是不合理的