vite+react 使用 react-activation 实现缓存页面

对应的版本

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

手动控制缓存

使用 withAliveScopeuseAliveController 获取控制函数

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 (返回值为上述 BooleanArray) |
| saveScrollPosition | Boolean | 自动保存滚动位置(默认true) |
| name | string | 缓存标识 |

相关推荐
小牛itbull20 分钟前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet12 小时前
那总结下来,react就是落后了
前端·react.js
王解15 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js