什么是keep-alive?
在项目开发中，有些组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。
熟悉vue的小伙伴们都知道，kee-alive 是它内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存。
基本使用如下：
//被keep-alive包含的组件会被缓存
<keep-alive>
<component />
</keep-alive>
具体的参数使用，请参考vue的keep-alive官方文档，这里不做赘述。
举个实例，管理后台的列表页切换分页，然后跳转某一详情页，再次返回时，列表页与切换之前不同了，而我们希望仍保留原页码。其实这种需求在React上很难实现，因为组件一旦卸载，就无法重用。不过我们可以借助第三方库，将固有组件抽离，然后实现组件缓存，本文介绍一下react-activation
react-activation的使用：
tips： 我的项目是umi + react hooks + antd，大家可以参考一下具体的使用方法。
- 在自己的项目里安装
react-activation
// 我的项目使用yarn进行安装
yarn add react-activation
- 在入口文件app.ts里引用AliveScope包裹根元素
import { AliveScope } from 'react-activation';
export function rootContainer(container: any) {
return React.createElement(AliveScope, null, container);
}
- 使用KeepAlive包裹需要缓存的组件
// 例如在List.tsx（列表页）
import { KeepAlive } from 'react-activation';
<KeepAlive>
<Table dataSource={dataSource} columns={columns} />
</KeepAlive>
这样就可以实现页面缓存了，So easy ！
