@young-design/keepalive v0.0.3

@young-design/keepalive

react 中的状态保持组件

安装

yarn add @young-design/keepalive

使用

import KeepAliveLayout, { useKeepOutlets, KeepAliveContext } from '@young-design/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>;
};