@alitajs/keep-alive

安装

yarn add @alitajs/keep-alive
or
npm i @alitajs/keep-alive

启用方式

配置keepalive:[]开启。

介绍

暂时的 keep alive 实现,有点投机。我们有多个项目用于生产环境中。你需要自行评估风险。 采用的方案,是在 layout 自己维护一份组件的显示或者隐藏,通过控制 key 变化,来实现的。 等 Umi 官方的keep alive 推出,我们会在底层采用 Umi 的方案,而保持以下的 api 不变,这意味着,你可以无感优化。

需要使用组件包裹 layout 的最内层。原理就是劫持了 children

配置

比如:

export default {
  plugins:['@alitajs/keepalive'],
  keepalive:['/pathname']
}

使用

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

umi 接口

常用方法可从 umi 直接 import。

比如:

import { dropByCacheKey } from 'umi';

接口包含

dropByCacheKey

解除状态保持

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

FAQ

1、相关issues https://github.com/umijs/umi/issues/3091