0.0.3 • Published 2 years ago
@myfrontframejs/keepalive v0.0.3
@myfrontframe/keepalive
react 中的状态保持组件
安装
yarn add @myfrontframe/keepalive
使用
import KeepAliveLayout, { useKeepOutlets, KeepAliveContext } from '@myfrontframe/keepalive';
import { useLocation } from 'react-router-dom';
import React, { useState, useContext } from 'react';
// 使用 useKeepOutlets 取到当前渲染的页面内容,可能是缓存内容
const Layout = () => {
const element = useKeepOutlets();
return (
{element}
)
}
// 使用 KeepAliveLayout 包裹上下文
const App = () => {
return (
<KeepAliveLayout keepalive={[/./]}>
// App
</KeepAliveLayout>
);
}
// 使用 useContext 取到 dropByCacheKey 清除缓存
const Home = () => {
const { dropByCacheKey } = useContext<any>(KeepAliveContext);
const { pathname } = useLocation();
return (
<button onClick={() => dropByCacheKey(pathname)}> Click Me! Clear Cache!</button>
)
}
0.0.3
2 years ago