这里写目录标题
一、安装插件(可选)
1、react-activation (推荐)
npm install react-activation
2、umi-plugin-keep-alive
这个插件也是基于react-activation
npm install umi-plugin-keep-alive --save
使用:
import {
KeepAlive } from 'umi'
const contentList = () => {
return (
<KeepAlive
name="/About" //可按照name卸载缓存状态下的 <KeepAlive> 节点
saveScrollPosition="screen" //自动保存共享屏幕容器的滚动位置
when={
true} > //true卸载时缓存,false卸载时不缓存
{
/*要保存状态的组件*/}
</KeepAlive>
)
}
但我使用umi4
搭建的项目,在安装该插件后,umi没有导出KeepAlive
,无法使用,所以直接用的第一种
二、AliveScope的两种配置方式
保证AliveScope稳定
1、在src/app.ts 中配置
配置文档: https://umijs.org/docs/api/runtime-config
import React from 'react';
import {
AliveScope } from 'react-activation';
// 修改交给 react-dom 渲染时的根组件, 在外层包裹AliveScope
export function rootContainer(container: any) {
return React.createElement(AliveScope, null, container);
}
然后在需要的组件外层包裹KeepAlive
import KeepAlive from "react-activation";
function Test() {
return (
<KeepAlive>
{
/*页面组件*/}
</KeepAlive>
);
}
// 如果有connect函数的可以如下写法:
const DataMine = connect(