umi Ant Design 使用umi-plugin-keep-alive实现KeepAlive状态存储

使用umi-plugin-keep-alive实现KeepAlive状态存储

1、安装

$ npm install umi-plugin-keep-alive --save
//或者
$ yarn add umi-plugin-keep-alive
           

2、使用

import { KeepAlive } from 'umi'
const contentList = () => {
	return (
		<>
			<KeepAlive 
				name="/About" //可按照name卸载缓存状态下的 <KeepAlive> 节点
				saveScrollPosition="screen" //自动保存共享屏幕容器的滚动位置
				when={true} >  //true卸载时缓存，false卸载时不缓存
				<About/> //要保存状态的组件
			</KeepAlive>
		</>
	)
}
           

此功能是基 react-activation，更详细的可参考 React Activation