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