$ npm install umi-plugin-keep-alive --save
//或者
$ yarn add umi-plugin-keep-alive
我用的umi,有的react 项目还需要个依赖包
yarn add react-activation
用法:
import { KeepAlive } from 'umi'
<KeepAlive
when={true} //true卸载时缓存,false卸载时不缓存
name={'salaryGroup'} //可按照name卸载缓存状态下的 <KeepAlive> 节点
saveScrollPosition="screen"> //自动保存共享屏幕容器的滚动位置
<TableList></TableList> //包裹的组件
</KeepAlive>
总结:根据不同场景还有不同的写法吧 ,奉上两篇参考文章:
React集成react-activation,实现页面缓存
记录react页面跳转是否要回到指定浏览位置解决方案
antd-design-pro实现多页签,切换页签保留缓存,keep-alive
umi Ant Design 使用umi-plugin-keep-alive实现KeepAlive状态存储
使用umi的keep Alive实现详情编辑页面的回退,保留列表的查询条件