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


    对应的版本

    1. "react": "^18.2.0",
    2. "react-activation": "^0.12.4",
    3. "react-dom": "^18.2.0",
    4. "react-router-dom": "^6.15.0",

    react-activation

    这是一个npm包,在react keep alive中用的人数应该是最多的包.
    这是GitHub地址react-activation

    安装

    1. yarn add react-activation
    2. # 或者
    3. npm install react-activation
    4. # 或者
    5. pnpm install react-activation

       现在 main.tsx  入口文件中 使用 

    1. import ReactDOM from "react-dom/client";
    2. import { BrowserRouter } from "react-router-dom";
    3. import App from "./App.tsx";
    4. import { AliveScope } from "react-activation";
    5. const { VITE_PROJECT_BASE } = import.meta.env;
    6. ReactDOM.createRoot(document.getElementById("root")!).render(
    7. <BrowserRouter basename={VITE_PROJECT_BASE}>
    8. <AliveScope> // 添加这个 AliveScope
    9. <App />
    10. AliveScope>
    11. BrowserRouter>
    12. );

      route.ts 路由文件中的使用

    1. import { Outlet } from "react-router-dom";
    2. import { RoutesTypes } from "@/types/routesType";
    3. import { TableOutlined } from "@ant-design/icons";
    4. import KeepAlive from "react-activation"; // 添加这个 包裹对应的组件
    5. // id 是 用作 唯一标识的 name 的 是 后期 调用 react-activation 对应方法,去除,和刷新组件
    6. // 房间
    7. import RoomList from "@/pages/RoomManagement/RoomList/index.tsx";
    8. // 公播
    9. import PublicBroadcastingList from "@/pages/PublicBroadcastingManagement/PublicBroadcastingList/index.tsx";
    10. import DefaultPublicBroadcasting from "@/pages/PublicBroadcastingManagement/DefaultPublicBroadcasting/index.tsx";
    11. // 设备
    12. import DeviceList from "@/pages/DeviceManagement/DeviceList/index.tsx";
    13. import DeviceConfiguration from "@/pages/DeviceManagement/DeviceConfiguration/index.tsx";
    14. const routes: RoutesTypes[] = [
    15. {
    16. sort: 1,
    17. path: "/layout/sass-platform",
    18. element: <Outlet />,
    19. meta: {
    20. title: "测试平台",
    21. },
    22. children: [
    23. {
    24. path: "/layout/sass-platform/room-management",
    25. element: <Outlet />,
    26. meta: {
    27. title: "房间管理",
    28. icon: TableOutlined,
    29. },
    30. children: [
    31. {
    32. path: "/layout/sass-platform/room-management/room-list",
    33. element: (
    34. <KeepAlive
    35. id="/layout/sass-platform/room-management/room-list"
    36. name="/layout/sass-platform/room-management/room-list"
    37. >
    38. <RoomList />
    39. KeepAlive>
    40. ),
    41. meta: {
    42. title: "房间列表",
    43. icon: TableOutlined,
    44. },
    45. },
    46. ],
    47. },
    48. {
    49. path: "/layout/sass-platform/public-broadcasting-management",
    50. element: <Outlet />,
    51. meta: {
    52. title: "公播管理",
    53. icon: TableOutlined,
    54. },
    55. children: [
    56. {
    57. path: "/layout/sass-platform/public-broadcasting-management/public-broadcasting-list",
    58. element: (
    59. <KeepAlive
    60. id="/layout/sass-platform/public-broadcasting-management/public-broadcasting-list"
    61. name="/layout/sass-platform/public-broadcasting-management/public-broadcasting-list"
    62. >
    63. <PublicBroadcastingList />
    64. KeepAlive>
    65. ),
    66. meta: {
    67. title: "公播列表",
    68. icon: TableOutlined,
    69. },
    70. },
    71. {
    72. path: "/layout/sass-platform/public-broadcasting-management/default-public-broadcasting",
    73. element: (
    74. <KeepAlive
    75. id="/layout/sass-platform/public-broadcasting-management/default-public-broadcasting"
    76. name="/layout/sass-platform/public-broadcasting-management/default-public-broadcasting"
    77. >
    78. <DefaultPublicBroadcasting />
    79. KeepAlive>
    80. ),
    81. meta: {
    82. title: "默认公播",
    83. icon: TableOutlined,
    84. },
    85. },
    86. ],
    87. },
    88. {
    89. path: "/layout/sass-platform/device-management",
    90. element: <Outlet />,
    91. meta: {
    92. title: "设备管理",
    93. icon: TableOutlined,
    94. },
    95. children: [
    96. {
    97. path: "/layout/sass-platform/device-management/device-list",
    98. element: (
    99. <KeepAlive
    100. id="/layout/sass-platform/device-management/device-list"
    101. name="/layout/sass-platform/device-management/device-list"
    102. >
    103. <DeviceList />
    104. KeepAlive>
    105. ),
    106. meta: {
    107. title: "设备列表",
    108. icon: TableOutlined,
    109. },
    110. },
    111. {
    112. path: "/layout/sass-platform/device-management/device-configuration",
    113. element: (
    114. <KeepAlive
    115. id="/layout/sass-platform/device-management/device-configuration"
    116. name="/layout/sass-platform/device-management/device-configuration"
    117. >
    118. <DeviceConfiguration />
    119. KeepAlive>
    120. ),
    121. meta: {
    122. title: "设备配置",
    123. icon: TableOutlined,
    124. },
    125. },
    126. ],
    127. },
    128. ],
    129. },
    130. ];
    131. export default routes;

    缓存的路由的不能懒加载

    最后 路由的显示

    Outlet 放置位置

    文档:https://github.com/CJY0208/react-activation/blob/master/README_CN.md

    手动控制缓存

    使用 withAliveScope 或 useAliveController 获取控制函数

    1. import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'
    2. //hook 函数式组件
    3. function app(){
    4. const { drop, dropScope, clear, getCachingNodes } = useAliveController()
    5. }
    6. //class 类组件
    7. @withAliveScope
    8. class App extends Component {
    9. render() {
    10. const { drop, dropScope, clear, getCachingNodes } = this.props
    11. }
    12. }
    • drop(name) 卸载缓存,不包括嵌套的KeepAlive
    • dropScope(name) 卸载缓存,包括嵌套的所有KeepAlive
    • refresh(name) 刷新缓存状态,不包括嵌套的KeepAlive
    • refreshScope(name) 刷新缓存状态,包括嵌套的所有KeepAlive
    • clear() 清空所有缓存
    • getCachingNodes() 获取所有缓存中的节点

    KeepAlive属性 

    属性名类型备注
    whenBoolean、Array、Function

    Boolean (true-卸载时缓存 false-卸载时不缓存)

    Array (第 1 位参数表示是否需要在卸载时缓存

    第 2 位参数表示是否卸载  的所有缓存内容,包括  中嵌的 

    // 例如:以下表示卸载时不缓存,并卸载掉嵌套的所有 ``
    
      ...
      
        ...
        ...
        ...
      
      ...
    

    Function (返回值为上述 Boolean 或 Array)

    saveScrollPosition

    Boolean自动保存滚动位置(默认true)
    namestring缓存标识
  • 相关阅读:
    音视频录制器—捕获并保存摄像头和麦克风数据
    毕设必备!Python智慧教室:考试作弊系统、动态点名等功能
    贪心,排序不等式:acwing第133场周赛:最小和
    echarts优秀使用案例
    lesson4-C++内存管理
    【微信小程序】网络请求
    ubuntu安装ssh,设置开机自启动
    『现学现忘』Git分支 — 38、Git分支介绍
    js的宏任务与微任务
    kubernetes集群部署(v1.23.5)
  • 原文地址:https://blog.csdn.net/zq18877149886/article/details/132845205