alitajs/keep-alive原理和使用，组件包裹layout的最内层，劫持children

安装

yarn add @alitajs/keep-alive

配置

export default {
  plugins:['@alitajs/keep-alive'],
  keepalive:['/list']
}

使用

// src/layouts/index.tsx
import { KeepAliveLayout } from 'umi';
const BasicLayout: React.FC = props => {
  return (
    <OtherLayout >
        <KeepAliveLayout {...props}>{children}</KeepAliveLayout>
    </OtherLayout>
  );
};

解除缓存

// src/pages/list/index.tsx
import { dropByCacheKey } from 'umi';
const Page: React.FC = props => {
  return (
      <div onClick={()=>{
          dropByCacheKey('/list');
      }}>Click dropByCacheKey
    </div>
  );
};

动态修改keepalive配置

// 假如 config 中配置 keepalive: []
import { patchKeepAlive } from 'umi';
const Page: React.FC = (props) => {
  return (
    <div
      onClick={() => {
        //
        patchKeepAlive((config) => {
          // 这里可以获取到最新的 keepalive 配置
          config.push('/list');
          // 操作配置之后返回
          return config;
        });
      }}
    >
      Click patchKeepAlive
    </div>
  );
};