@arosejs/layout v0.0.3

@arosejs/keepalive

react 中的状态保持组件

安装

yarn add @arosejs/keepalive

使用

import KeepAliveLayout, { useKeepOutlets, KeepAliveContext } from "@arose/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>;
};