【源码】基于React和UmiJS框架的Antd Pro项目KeepAlive功能实现

项目简介

此项目是基于React和UmiJS框架的Ant Design Pro项目，着重实现了KeepAlive功能。借助该功能，用户在切换标签页或重新进入页面时，能保留页面状态与数据，避免重复渲染和加载数据，进而提升用户体验和页面性能。

项目的主要特性和功能

1. UmiJS框架：支持模块化开发和路由管理，简化项目构建与配置。
2. Ant Design Pro组件库：提供丰富UI组件和布局方式，可快速构建美观前端界面。
3. KeepAlive功能：缓存页面组件，避免重复渲染和加载数据，提升页面切换流畅性。
4. 标签页管理：支持标签页切换和关闭操作，配备方便的面包屑导航，提升用户操作便捷性。

安装使用步骤

1. 复制项目：把项目代码复制到本地，可使用git clone命令或直接下载项目压缩包。
2. 安装依赖：在项目根目录下运行以下命令安装项目依赖： bash yarn install 或 bash npm install
3. 启动项目：安装完成后，运行以下命令启动项目： bash yarn start 或 bash npm start
4. 使用KeepAlive功能：在需要缓存的页面组件外部包裹<KeepAlive />组件，实现页面缓存功能。
5. 配置路由：依据项目需求，在routes.ts中配置路由信息，声明需要缓存的页面。

额外说明

1. 不需要缓存的页面：在路由配置中设置hideInPanelTab: true，禁止缓存该页面。
2. 编辑页、新增页操作：完成编辑或新增操作后，使用closeCurrent()方法关闭当前标签页，避免缓存数据残留。
3. 列表页数据刷新：返回列表页时，使用useThrottleEffect钩子函数刷新数据，确保列表数据最新。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】