React——组件缓存 react-activation

1、安装依赖

npm i -S react-activation

2、包裹根组件

import { AliveScope } from "react-activation"<AliveScope><App />
</AliveScope>

3、缓存组件

import { KeepAlive } from "react-activation"export default () => {const [isShow, setIsShow] = useState(true)return <div><button onClick={() => setIsShow(!isShow)}>切换</button>{isShow &&<KeepAlive><Page3 /></KeepAlive>}<Page4 /></div>
}

4、路由缓存

<Routepath="/page1"render={props => (<KeepAlive name="/page1"><Item {...props} /></KeepAlive>)}
/>

5、KeepAlive属性

属性名	类型	备注
when	Boolean、Array、Function	Boolean (true-卸载时缓存 false-卸载时不缓存) Array (第 1 位参数表示是否需要在卸载时缓存 第 2 位参数表示是否卸载 <KeepAlive> 的所有缓存内容，包括 <KeepAlive> 中嵌的 <KeepAlive>) Function (返回值为上述 Boolean 或 Array)
saveScrollPosition	Boolean	自动保存滚动位置（默认true）
name	string	缓存标识

6、手动控制缓存

使用 withAliveScope 或 useAliveController 获取控制函数

import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'//hook 函数式组件
function app(){const { drop, dropScope, clear, getCachingNodes } = useAliveController()
}//class 类组件
@withAliveScope
class App extends Component {render() {const { drop, dropScope, clear, getCachingNodes } = this.props}
}

• drop(name) 卸载缓存，不包括嵌套的KeepAlive
• dropScope(name) 卸载缓存，包括嵌套的所有KeepAlive
• refresh(name) 刷新缓存状态，不包括嵌套的KeepAlive
• refreshScope(name) 刷新缓存状态，包括嵌套的所有KeepAlive
• clear() 清空所有缓存
• getCachingNodes() 获取所有缓存中的节点