对应的版本
javascript
"react": "^18.2.0",
"react-activation": "^0.12.4",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",react-activation
这是一个npm包，在react keep alive中用的人数应该是最多的包.
这是GitHub地址react-activation
安装
javascript
yarn add react-activation
# 或者
npm install react-activation
# 或者
pnpm install react-activation 现在 main.tsx 入口文件中 使用
javascript
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";
import { AliveScope } from "react-activation";
const { VITE_PROJECT_BASE } = import.meta.env;
ReactDOM.createRoot(document.getElementById("root")!).render(
<BrowserRouter basename={VITE_PROJECT_BASE}>
<AliveScope> // 添加这个 AliveScope
<App />
</AliveScope>
</BrowserRouter>
);route.ts 路由文件中的使用
javascript
import { Outlet } from "react-router-dom";
import { RoutesTypes } from "@/types/routesType";
import { TableOutlined } from "@ant-design/icons";
import KeepAlive from "react-activation"; // 添加这个 包裹对应的组件
// id 是 用作 唯一标识的 name 的 是 后期 调用 react-activation 对应方法，去除，和刷新组件
// 房间
import RoomList from "@/pages/RoomManagement/RoomList/index.tsx";
// 公播
import PublicBroadcastingList from "@/pages/PublicBroadcastingManagement/PublicBroadcastingList/index.tsx";
import DefaultPublicBroadcasting from "@/pages/PublicBroadcastingManagement/DefaultPublicBroadcasting/index.tsx";
// 设备
import DeviceList from "@/pages/DeviceManagement/DeviceList/index.tsx";
import DeviceConfiguration from "@/pages/DeviceManagement/DeviceConfiguration/index.tsx";
const routes: RoutesTypes[] = [
{
sort: 1,
path: "/layout/sass-platform",
element: <Outlet />,
meta: {
title: "测试平台",
},
children: [
{
path: "/layout/sass-platform/room-management",
element: <Outlet />,
meta: {
title: "房间管理",
icon: TableOutlined,
},
children: [
{
path: "/layout/sass-platform/room-management/room-list",
element: (
<KeepAlive
id="/layout/sass-platform/room-management/room-list"
name="/layout/sass-platform/room-management/room-list"
>
<RoomList />
</KeepAlive>
),
meta: {
title: "房间列表",
icon: TableOutlined,
},
},
],
},
{
path: "/layout/sass-platform/public-broadcasting-management",
element: <Outlet />,
meta: {
title: "公播管理",
icon: TableOutlined,
},
children: [
{
path: "/layout/sass-platform/public-broadcasting-management/public-broadcasting-list",
element: (
<KeepAlive
id="/layout/sass-platform/public-broadcasting-management/public-broadcasting-list"
name="/layout/sass-platform/public-broadcasting-management/public-broadcasting-list"
>
<PublicBroadcastingList />
</KeepAlive>
),
meta: {
title: "公播列表",
icon: TableOutlined,
},
},
{
path: "/layout/sass-platform/public-broadcasting-management/default-public-broadcasting",
element: (
<KeepAlive
id="/layout/sass-platform/public-broadcasting-management/default-public-broadcasting"
name="/layout/sass-platform/public-broadcasting-management/default-public-broadcasting"
>
<DefaultPublicBroadcasting />
</KeepAlive>
),
meta: {
title: "默认公播",
icon: TableOutlined,
},
},
],
},
{
path: "/layout/sass-platform/device-management",
element: <Outlet />,
meta: {
title: "设备管理",
icon: TableOutlined,
},
children: [
{
path: "/layout/sass-platform/device-management/device-list",
element: (
<KeepAlive
id="/layout/sass-platform/device-management/device-list"
name="/layout/sass-platform/device-management/device-list"
>
<DeviceList />
</KeepAlive>
),
meta: {
title: "设备列表",
icon: TableOutlined,
},
},
{
path: "/layout/sass-platform/device-management/device-configuration",
element: (
<KeepAlive
id="/layout/sass-platform/device-management/device-configuration"
name="/layout/sass-platform/device-management/device-configuration"
>
<DeviceConfiguration />
</KeepAlive>
),
meta: {
title: "设备配置",
icon: TableOutlined,
},
},
],
},
],
},
];
export default routes;缓存的路由的不能懒加载
最后 路由的显示
Outlet 放置位置
文档：https://github.com/CJY0208/react-activation/blob/master/README_CN.md
手动控制缓存
使用
withAliveScope或useAliveController获取控制函数
javascript
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() 获取所有缓存中的节点
KeepAlive属性
|--------------------|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 属性名 | 类型 | 备注 |
| when | Boolean、Array、Function | Boolean (true-卸载时缓存 false-卸载时不缓存) Array (第 1 位参数表示是否需要在卸载时缓存 第 2 位 参数表示是否卸载 <KeepAlive> 的所有缓存内容，包括 <KeepAlive> 中嵌的 <KeepAlive> // 例如：以下表示卸载时不缓存，并卸载掉嵌套的所有 `<KeepAlive>` <KeepAlive when={[false, true]}> ... <KeepAlive> ... <KeepAlive>...</KeepAlive> ... </KeepAlive> ... </KeepAlive> Function (返回值为上述 Boolean 或 Array) |
| saveScrollPosition | Boolean | 自动保存滚动位置（默认true） |
| name | string | 缓存标识 |