需求场景
需求1. 分页列表跳转至详情,然后再从详情中返回至列表时,还原列表跳转时的状态(筛选条件,当前页码数等).
需求2. 分页列表跳转至编辑,然后编辑完成返回至列表页时,除编辑项更新外,还原列表跳转时状态.
解决方案(第三方库)
- 个人项目
- 截止目前issues:37;start:1.3k
- 作者目前比较活跃(CJY0208),膜拜大佬,记得给个Star!!!
- 使用demo图例
react-activation文档说明比较全面不再赘述,基本原理是缓存DOM,来完成组件与页面的缓存.
解决思路
需求1：按照文档说明使用即可;不过注意使用umi的同学,umi的版本在3或者3以上的可以使用umi-plugin-keep-alive,umi官方出品较为稳定;没有使用umi或者umi3以下的可以直接使用该库,不过使用使用mui3以下的同学注意KeepAlive的使用方式.
import KeepAlive from 'react-activation'
class A extends Compontent{
...
}
export default props=>(
<>
<KeepAlive>
<A {...props} />
</KeepAlive>
</>
)
需求2：原本想做成局部刷新的形式,奈何能力不够;但是react-activation库的作者贴心的提供了激活与缓存两种生命周期,那么我们就可以进行业务操作了.当编辑完成后返回至列表页时列表页根据提供的生命周期进行如下操作.
// 列表页
// 缓存激活生命周期
componentDidActivate() {
// console.log('TestClass: componentDidActivate')
// TODO 再次调用请求列表方法,完成列表页的更新.
}
其他：我们在处理缓存页面的时候应该需要手动控制缓存的释放与存储(此处应该可封装一下),比如从列表页调整至详情页,详情页返回至列表页的确要进行列表页的状态保持,但是我们从列表页跳转至详情页之后,再次跳转至其他页面(此时详情页销毁的情况下),通过其他页面跳转至列表页,是否需要清空列表页缓存(作者已经提供相关Api)?这个就看你们的需求了,做个了一个简单的类似场景的示例图思路是这样的,还没实现,有问题欢迎大家指出哈(跳转的判断逻辑我准备使用路由地址来进行判断,且其中的关于缓存页面的操作react-activation提供有相应Api).
