【Ant Design Pro】如何实现组件的状态保存umi-plugin-keep-alive插件的使用

都知道vuejs里面帮我们实现了一个内置的keep-alive组件,给我们缓存一些组件的状态带来了很大的便利。但是在react中没有自带的实现,可以借助社区的插件umi-plugin-keep-alive来实现这个功能。

实现效果对比

  • 未使用插件,可以看到我们在页面跳出去再返回的时候,之前的状态丢失了
    请添加图片描述
  • 使用了插件后的效果,页面跳转数去后再返回,表单个table分页都是跳出去时的状态。这个需求在vuejs中是可以直接使用keep-alive组件的。react中我们使用umi-plugin-keep-alive实现
    请添加图片描述

安装

npm i umi-plugin-keep-alive

注册

config/config.ts中添加下面的代码,不然不生效。

plugins: ['umi-plugin-keep-alive'],

使用

在注册之后,才可以从umi中导出这个组件,来包裹我们需要缓存的组件,且根元素只能有一个,否则会报错。

这些是我们可以使用的全部的钩子,自动给我们配置好了,需要使用直接引入就行。
在这里插入图片描述

import  { Button, Space, Table, Form, Input,Image} from 'antd'
import type { TableColumnsType, TableProps } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import React from 'react'
import { connect } from '@umijs/max';
import { KeepAlive,useModel,history } from 'umi'
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
type NameType = {name:string,age:number,address?:string,
}
interface DemoProps {user:NameType,add:()=>void,minus:()=>void,asyncAdd:()=>void,count:number,msg:string,
}interface CountType {count:number
}interface DataType {key: React.Key;name: string;age: number;address: string;
}type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];const columns: TableColumnsType<DataType> = [{ title: 'Name', dataIndex: 'name' },{ title: 'Age', dataIndex: 'age' },{ title: 'Address', dataIndex: 'address' },
];const dataSource = Array.from<DataType>({ length: 46 }).map<DataType>((_, i) => ({key: i,name: `Edward King ${i}`,age: 32,address: `London, Park Lane no. ${i}`,
}));
const DemoPage:React.FC<DemoProps> = (props) => {console.log("🚀 ~ props:", props)const { msg,user,add,count: num,minus,asyncAdd } = propsconst [count, setCount] = React.useState(0)const [isShow, setIsShow] = React.useState(true)const [selectedRowKeys, setSelectedRowKeys] = React.useState<React.Key[]>([]);const [form] = Form.useForm();const [clientReady, setClientReady] = React.useState<boolean>(false);const {initialState} = useModel('@@initialState')const handleAdd:() => void = () => {setCount(count + 1)add()}const handleMinus:() => void = () => {setCount(count - 1)minus()}const handleSetState:() => void = () => {console.log('setstate')setIsShow(!isShow)}const onSelectChange = (newSelectedRowKeys: React.Key[]) => {setSelectedRowKeys(newSelectedRowKeys);};const rowSelection: TableRowSelection<DataType> = {selectedRowKeys,onChange: onSelectChange,};const onFinish = (values: any) => {console.log('Finish:', values);};const handleAddAsync = () => {asyncAdd()}// record的类型const handleClick = (item: DataType) => {console.log('click ', item);history.push(`/admin/sub-page`);};return <div><h2>Demo Page</h2>{/* <p><Image src={initialState?.settings?.logo}/></p> */}{selectedRowKeys.length > 0 && <span>Selected: {selectedRowKeys.length}</span>}{/* <div><p>{msg}</p><p>{user.name  + '---------'  +   user.age}</p><p>dva里面的num:{num}</p><Space><Button type="primary" onClick={handleAdd}>add</Button><Button type="primary" danger onClick={handleMinus}>minus</Button><Button type="primary"  onClick={handleAddAsync}>addAsync</Button></Space></div> */}<KeepAlive><Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}><Form.Itemname="username"rules={[{ required: true, message: 'Please input your username!' }]}><Input prefix={<UserOutlined />} placeholder="Username" /></Form.Item><Form.Itemname="password"rules={[{ required: true, message: 'Please input your password!' }]}><Input prefix={<LockOutlined />} type="password" placeholder="Password" /></Form.Item><Form.Item shouldUpdate>{() => (<Buttontype="primary"htmlType="submit">Log in</Button>)}</Form.Item></Form><Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} onRow={(record) => {return {onClick: (event) => {handleClick(record);}, // 点击行onDoubleClick: (event) => {},onContextMenu: (event) => {},onMouseEnter: (event) => {}, // 鼠标移入行onMouseLeave: (event) => {},};}}/></KeepAlive></div>
}const Counter:React.FC<CountType> = (props) => {// const { count } = propsconst [count, setCount] = React.useState(0)const handleAdd:() => void = () => {setCount(count + 1)}return <div><p>{count}</p><Button type="primary" onClick={handleAdd}>add</Button></div>}const mapStateToProps = (state:any) => {console.log("🚀 ~ mapStateToProps ~ state:", state)return {user: state.userModel.user,count: state.userModel.count}
}const mapToDispatchToProps = (dispatch:any) => {return {add: () => dispatch({ type: 'userModel/add', payload: 4 }),minus: () => dispatch({ type: 'userModel/minus', payload: 4 }),asyncAdd: () => dispatch({ type: 'userModel/asyncAdd',payload:20 })}}export default connect(mapStateToProps,mapToDispatchToProps)(DemoPage)

结尾

其他的钩子可以去尝试下效果,基本就跟vuejs里面一样使用了,有监听创建销毁组件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/467553.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Amesim中PID控制元件

PID 控制原理 PID 即比例&#xff08;Proportional&#xff09;、积分&#xff08;Integral&#xff09;、微分&#xff08;Derivative&#xff09;控制。比例环节根据偏差的大小成比例地对系统进行调节&#xff0c;偏差越大&#xff0c;调节作用越强。积分环节用于消除系统的…

SpringBoot框架:共享汽车行业的技术革新

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了共享汽车管理系统的开发全过程。通过分析共享汽车管理系统管理的不足&#xff0c;创建了一个计算机管理共享汽车管理系统的方案。文章介绍了共享汽车管理系统的系…

ASP.NET Core 路由规则,自定义特性路由 ,IActionConstraint 路由约束 总结 mvc

资料 资料 路由服务 路由服务是在 Program.cs 中使用 builder.Services.AddRouting()注册的&#xff0c; 只是默认在 builder 之前已经注册过了&#xff0c;无需我们再次注册。 AddRouting()方法必须在 UseRouting()方法之前运行&#xff0c;它是路由的基础服务。 MapContro…

linux基础——详细篇

免责声明 学习视频来自B 站up主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 linux 基础命令重现 cd(切…

Prosre:一款直观的协议发送模拟软件

Proser 是一款直观的协议编辑、发送端模拟软件。 在涉及二进制协议通信的程序开发过程中&#xff0c;我们经常会通过助手类工具编写协议来验证自己的代码&#xff0c;但这些助手对于大协议的编辑非常不友好&#xff0c;这时Proser会协助你轻松的完成测试。 特点 数据直接表达…

常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式

目前开发的项目很大程度上是为明年的国产化做准备了&#xff0c;所以借这个机会把用了十年的自研系统全部重写&#xff0c;订立更严格的规范&#xff0c;本文记录一下返回格式及对应状态码。 常见 HTTP 状态码及解释 HTTP 状态码用于表示客户端请求的响应状态&#xff0c;它们…

【DL】YOLO11 OBB目标检测 | 模型训练 | 推理

本文进行YOLO11的旋转目标检测任务,旋转目标检测能够更精确地定位和描述那些非水平排列的目标,比如倾斜的飞机、船舶等。在原始的目标检测中,添加一个角度预测,实现定向边界框检测。 话不多说,先来个效果图!!! YOLO11中的旋转目标检测的特点 ▲更精确的定位:通过使用…

自动泊车端到端算法 ParkingE2E 介绍

01 算法介绍 自主泊车是智能驾驶领域中的一项关键任务。传统的泊车算法通常使用基于规则的方案来实现。因为算法设计复杂&#xff0c;这些方法在复杂泊车场景中的有效性较低。 相比之下&#xff0c;基于神经网络的方法往往比基于规则的方法更加直观和多功能。通过收集大量专家…

2025斯诺克器材与用品展,2025郑州台球器材展会3月举办

立足中原&#xff0c;辐射全国&#xff0c;壹肆柒2025中国&#xff08;郑州&#xff09;国际台球产业博览会&#xff0c;展位招商正在进行&#xff1b; 2025中国&#xff08;郑州&#xff09;国际台球产业博览会&#xff08;壹肆柒台球展&#xff09; The 2025 China (Zhengzh…

单调栈—acwing

一、题目&#xff1a; AcWing 830. 单调栈 - AcWing 暴力算法思想 双指针算法&#xff0c;本质上是比较操作&#xff0c;两个循环&#xff0c;时间复杂度高。通过栈可以一次遍历。 可以知道&#xff0c;只要前面有一个小于我的数&#xff0c;就可以。如果前面的数&#xff…

Ingress nginx 公开TCP服务

文章目录 背景搞起拓展( PROXY Protocol )参考 背景 公司业务繁多&#xff0c; HTTP、GRPC、TCP多种协议服务并存&#xff0c;Kubernetes流量入口复杂&#xff0c;所以萌生了通过LoadBalancer Ingress-nginx 的方式完全的结果入口流量&#xff0c;当然在高并发的场景下可以对…

小白投资理财 - 看懂 MACA K线图

小白投资理财 - 看懂 MACA K线图 什么是 MACDMACD 主要有三种用法第一是看快线和慢线两个线的位置第二是观察两条线交叉的情况第三就是通过观察 BAR 柱状图可预判该股市的走向例子 MACD 缺点总结 股市茫茫大海, 打开 K 线图, 几时开始入场, 几时应该退场傻傻不知道,没有一个指标…

Essential Cell Biology -- Fifth Edition

今天开始看一本书&#xff0c;单纯想学生物和英语。如果有错误烦请大家指出。黑色下划线是总结&#xff0c; Chapter one 1.1 Cell: the fundamental units of life 什么是生物的基本特征&#xff0c;并将它们与非生物区分开来&#xff1f; 答案取决于[ hinges on]一个现在…

windows 实现 linux tail -f 的效果

需求&#xff1a; 有的环境部署在windows上面&#xff0c;想要查看生成的log日志&#xff0c;用文本打开无法实现自动更新&#xff0c;想要linux tail -f 的效果 编写txt文件 echo off powershell -Command "Get-Content -Path 文件地址 -Wait -Tail 200 -Encoding UTF8…

MySQL数据库专栏(四)MySQL数据库链接操作C#篇

摘要 主要讲述MySQL数据库链接操作C#的操作 目录 1、添加引用 2、接口介绍 2.1、MySqlConnection 2.2、MySqlCommand 2.3、MySqlDataReader 2.4、MySqlDataAdapter 2.5、MySqlTransaction 3、全网功能最全辅助类实现 4、辅助类调用实例 1、添加引用 …

tensorflow案例5--基于改进VGG16模型的马铃薯识别,准确率提升0.6%,计算量降低78.07%

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 本次采用VGG16模型进行预测&#xff0c;准确率达到了98.875&#xff0c;但是修改VGG16网络结构&#xff0c; 准确率达到了0.9969&#xff0c;并且计算量…

【MM-Align】学习基于输运的最优对齐动力学,快速准确地推断缺失模态序列

代码地址 - > github传送 abstract 现有的多模态任务主要针对完整的输入模态设置&#xff0c;即每个模态在训练集和测试集中要么是完整的&#xff0c;要么是完全缺失的。然而&#xff0c;随机缺失的情况仍然没有得到充分的研究。在本文中&#xff0c;我们提出了一种新的方…

github使用基础

要通过终端绑定GitHub账号并进行文件传输&#xff0c;你需要使用Git和SSH密钥来实现安全连接和操作。以下是一个基本流程&#xff1a; 设置GitHub和SSH 检查Git安装 通过终端输入以下命令查看是否安装Git&#xff1a; bash 复制代码 git --version配置Git用户名和邮箱 bash …

教程:FFmpeg结合GPU实现720p至4K视频转换

将一个 720p 的视频放大编码到 4K&#xff0c;这样的视频处理在很多业务场景中都会用到。很多视频社交、短视频、视频点播等应用&#xff0c;都会需要通过服务器来处理大量的视频编辑需求。 本文我们会探讨一下做这样的视频处理&#xff0c;最低的 GPU 指标应该是多少。利用开源…

大健康零售行业帮助中心的构建与客户服务优化

在大健康零售行业&#xff0c;客户服务的质量直接影响着企业的品牌形象和市场竞争力。随着数字化转型的推进&#xff0c;构建一个高效、智能的帮助中心成为了提升客户服务和满意度的关键。本文将分析大健康零售行业如何通过构建帮助中心来优化客户服务&#xff0c;并提升客户满…