umi4 项目使用 keepalive 缓存页面(umi-plugin-keep-alive、react-activation)

umi4使用keepalive

配置文件config\config.ts

export default defineConfig({plugins: ['umi-plugin-keep-alive'],
});

安装add umi-plugin-keep-alive

yarn add umi-plugin-keep-alive

页面 A

import { KeepAlive, history, useAliveController } from '@umijs/max';
const PageA = () => {const [count, setCount] = useState(0);const { drop } = useAliveController();return (<div><p>{count}</p><buttononClick={() => {// 跳转前先清除缓存drop('details').then(() => {history.push('/info-details');});}}>点击进入详情页</button></div>);
};export default () => (<KeepAlive name="page-A"><PageA /></KeepAlive>
);

页面 B

import { KeepAlive, history, useAliveController } from '@umijs/max';
const PageB = () => {const [count, setCount] = useState(0);const { drop } = useAliveController();return (<div><p>{count}</p> <buttononClick={() => {// 跳转前先清除缓存drop('details').then(() => {history.push('/info-details');});}}>点击进入详情页</button></div>);
};export default () => (<KeepAlive name="page-b"><PageB /></KeepAlive>
);

详情页

import { KeepAlive } from '@umijs/max';
const Details= () => {const [count, setCount] = useState(0);return <div>{count}</div>;
};export default () => (<KeepAlive name="details"><Details/></KeepAlive>
);

官网链接：https://github.com/CJY0208/react-activation/blob/master/README_CN.md

使用 withAliveScope 或 useAliveController 获取控制函数

• drop(name): （"卸载"仅可用于缓存状态下的节点，如果节点没有被缓存但需要清空缓存状态，请使用 “刷新” 控制）

按 name 卸载缓存状态下的 节点，name 可选类型为 String 或 RegExp，注意，仅卸载命中 的第一层内容，不会卸载 中嵌套的、未命中的

• dropScope(name): （"卸载"仅可用于缓存状态下的节点，如果节点没有被缓存但需要清空缓存状态，请使用 “刷新” 控制）

按 name 卸载缓存状态下的 节点，name 可选类型为 String 或 RegExp，将卸载命中 的所有内容，包括 中嵌套的所有

• refresh(name):

按 name 刷新缓存状态下的 节点，name 可选类型为 String 或 RegExp，注意，仅刷新命中 的第一层内容，不会刷新 中嵌套的、未命中的

• refreshScope(name):

按 name 刷新缓存状态下的 节点，name 可选类型为 String 或 RegExp，将刷新命中 的所有内容，包括 中嵌套的所有

• clear():

将清空所有缓存中的 KeepAlive

• getCachingNodes():

获取所有缓存中的节点

自动缓存

给需要控制缓存的 标签增加 when 属性，取值如下

当 when 类型为 Boolean 时

• true: 卸载时缓存
• false: 卸载时不缓存

<KeepAlive when={true}>

当 when 类型为 Array 时

• 第 1 位参数表示是否需要在卸载时缓存
• 第 2 位参数表示是否卸载 的所有缓存内容，包括 中嵌套的所有

<KeepAlive when={[false, true]}>

当 when 类型为 Function 时（建议使用这种方式）

返回值为上述 Boolean 或 Array，依照上述说明生效

但 when 的最终计算时机调整到 组件 componentWillUnmount 时，可避免大部分 when 属性没有达到预期效果的问题

<KeepAlive when={() => true}>
<KeepAlive when={() => [false, true]}>

报错信息

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

const PageA = () => (<div>PageA</div>
)export default () => <KeepAlive> <PageA /></KeepAlive>

问题：存在空格，删除空格即可

const PageA = () => (<div>PageA</div>
)export default () => <KeepAlive><PageA /></KeepAlive>