umijs中实现keep-alive功能

利用umi-plugin-keep-alive实现keep-alive效果，在h5页面中实现返回的时候不刷新返回页面的效果。

安装插件依赖

yarn add umi-plugin-keep-alive

配置作用域

app.ts中设置稳定的作用域

import { AliveScope } from 'react-activation';

export function rootContainer(container: any) {
  return React.createElement(AliveScope, null, container);
}

配置缓存的页面容器

layouts/index.tsx 中设置

import { KeepAlive } from 'umi';

// 被该layout组件包括的子组件页面，可以实现缓存效果。
// 此时如果用goBack()方法返回到缓存页面，则不会进行重刷新
export default function LayoutComponent({ children }: any) {
  return (
    <KeepAlive>
      {children}
    </KeepAlive>
  );
}