React Keepalive Component
npm install @654356282/react-keepalive为组件提供 keepalive 能力，无数据断层！不操作 dom 节点！使用 suspense 作 keepalive!
缓存策略：优先使用 children 的 key 值作为缓存的 key，如果不存在 key 则使用 children 的 type
excludes: []|Regexp|(key: string|number)=>boolean: 传入不需要缓存的组件的key，或者可传入正则表达式或函数
includes: []|Regexp|(key: string|number)=>boolean: 传入需要换的的组件的key，或者可传入正则表达式或函数
``ts`
type KeepAliveRef = {
controller: {
// 丢弃缓存的组件
drop: (name: Key) => void;
} | null;
};
useActived: 组件从初次渲染或者从隐藏切换到显示时激活useUnactived: 组件销毁或者从显示切换到隐藏时激活useController: 获取ref中controller对象
组件缓存
`ts
import { KeepAlive, useActived, useUnactived } from "@654356282/react-keepalive";
import React, { useState } from "react";
const Comp1 = () => {
const [count, setCount] = useState(0);
useActived(() => {
console.log("Comp1 is actived");
});
useUnactived(() => {
console.log("Comp1 is unactived");
});
return (
const Comp2 = () => {
const [count, setCount] = useState(0);
useActived(() => {
console.log("Comp2 is actived");
});
useUnactived(() => {
console.log("Comp2 is unactived");
});
return (
// 此时keepalive中缓存的key值为Comp1和Comp2
function App() {
const [toggle, setToggle] = useState(false);
return (
与
集成，使用createBrowserRouter
ts
import { ReactElement, useState } from "react";
import { KeepAlive, useActived, useUnactived } from "@654356282/react-keepalive";
import { RouterProvider, createBrowserRouter, NavLink } from "react-router-dom";
import React from "react";function KeepAliveWrapper(props: { children: ReactElement }) {
return {props.children} ;
}
const router = createBrowserRouter([
{
path: "/",
element: (
),
},
{
path: "/home",
element: (
),
},
]);
function Root() {
const [count, setCount] = useState(0);
useActived(() => {
console.log("Root is actived");
});
useUnactived(() => {
console.log("Root is unactived");
});
return (
Root
{count}
跳转
);
}function Home() {
const [count, setCount] = useState(0);
useActived(() => {
console.log("Home is actived");
});
useUnactived(() => {
console.log("Home is unactived");
});
return (
Home
{count}
跳转
);
}export default function App() {
return
}
`
使用嵌套式路由tsx
import React, { ReactElement, useState } from "react";
import {
BrowserRouter,
NavLink,
Outlet,
Route,
Routes,
} from "react-router-dom";
import { KeepAlive, useActived, useUnactived } from "@654356282/react-keepalive";function wrapKeepAlive(children: ReactElement) {
return {children} ;
}
const Home = () => {
useActived(() => {
console.log("home actived");
});
useUnactived(() => {
console.log("home unactived");
});
const [count, setCount] = useState(0);
return (
home--{count}
跳转 user
);
};const HomeSon = () => {
const [count, setCount] = useState(0);
useActived(() => {
console.log("home son actived");
});
useUnactived(() => {
console.log("home son unactived");
});
return (
home son--{count}
跳转user son
);
};const User = () => {
const [count, setCount] = useState(0);
useActived(() => {
console.log("user actived");
});
useUnactived(() => {
console.log("user unactived");
});
return (
user--{count}
跳转 home
);
};const UserSon = () => {
const [count, setCount] = useState(0);
useActived(() => {
console.log("user son actived");
});
useUnactived(() => {
console.log("user son unactived");
});
return (
user son--{count}
跳转home son
);
};const App = () => {
return (
element={wrapKeepAlive(
/>
element={wrapKeepAlive(
/>
);
};
export default App;
`> tips: 如果需要缓存子路由，请保证父级路由需要