使用umi-plugin-keep-alive实现KeepAlive状态存储，
并且实现
进入下一个页面时缓存，后退页面时不缓存（卸载）
类似微信小程序的页面缓存机制
1、安装
$ npm install umi-plugin-keep-alive --save
//或者
$ yarn add umi-plugin-keep-alive
2、使用
import { KeepAlive, history} from 'umi'
const page = () => {
return (
<>这是一个页面</>
)
}
// 不要直接在上方page组件中包裹KeepAlive，会出问题，要以下面的方式去导出
export default () => {
return (
<KeepAlive
saveScrollPosition="screen" //自动保存共享屏幕容器的滚动位置
id={history.location.search || history.location.pathname} // 根据参数去缓存，如果参数不同就缓存多份，如果参数相同就使用同一个缓存。这样解决了传参改变时，页面不刷新的问题
when={() => { // 根据路由的前进和后退状态去判断页面是否需要缓存，前进时缓存，后退时不缓存（卸载）。 when中的代码是在页面离开（卸载）时触发的。
return history.action != 'POP'; //true卸载时缓存，false卸载时不缓存
}}
>
{/* 页面组件 */}
<page></page>
</KeepAlive>
)
};
更详细的可参考 React Activation
3、和dva组合使用
// 页面
const Home = ()=>{
...
}
// 链接dva
const ModelHome = connect(
({ homeModel }: any) => ({
homeModel
})
)(Home);
// 缓存
export default () => {
return (
<KeepAlive
saveScrollPosition="screen"
id={history.location.search || history.location.pathname}
when={() => {
return history.action != 'POP';
}}
>
{/* 页面组件 */}
<ModelHome></ModelHome>
</KeepAlive>
)
};
