【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.xdnf.cn/news/10241.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】二叉排序树和平衡二叉树

目录 1. 二叉搜索树&#xff08;BST&#xff09; 1.1 二叉搜索树的定义及特点 1.1.1 定义 1.1.2 特点 1.2 二叉排序树的构造&#xff08;创建&#xff09; 1.2.1 基本思想 1.2.2 算法 1.3 二叉排序树的删除 2. 平衡二叉树&#xff08;AVL&#xff09; 2.1 为什么要用…

C++四种类型转换

C语言提供了四种类型转换 const_cast: 可以去除掉常量属性的类型转换 //const_cast const int a 10; double* p1 (double*)&a;//类型和原来的类型可以不一致&#xff0c;但是不安全 int* p2 const_cast<int*>(&a);//类型和原本的类型必须匹配 //<>中必…

【SPIE出版,往届稳定EI检索】2024智能视觉与数据建模国际学术会议(ICIVD 2024,12月13-15日)

2024智能视觉与数据建模国际学术会议 2024 International Conference on Intelligent Vision and Data modeling (ICIVD 2024) 重要信息 会议官网&#xff1a;www.iccaid.net 2024 International Conference on Intelligent Vision and Data modeling (ICIVD 2024)www.iccaid…

大模型的思维链提示

文章目录 思维链提示的基本形式思维链提示的优化策略关于思维链的进一步讨论思维链提示是一种高级提示策略,旨在增强大语言模型在各类复杂推理任务上的表现。常见的推理任务包括算术推理、常识推理以及符号推理等多种任务。与上下文学习方法仅使用⟨输入,输出⟩二元组来构造提…

JavaScript day01 笔记

一、引入方式 JavaScript 程序不能独立运行&#xff0c;它需要被嵌入 HTML 中&#xff0c;然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中 1️⃣内部 通过 script 标签包裹 JavaScript 代码&#xff08;一般就写在</script>的…

vue,uniapp,微信小程序解决字符串中出现数字则修改数字样式,以及获取字符串中的数字

简单记录一下&#xff0c;最近遇到的一个新需求&#xff1a;后端返回的是非富文本&#xff0c;只是一串字符串&#xff0c;其中包含了文字和数字&#xff0c;前端需要将出现数字的地方将其加粗或者修改颜色等需求 设计思路&#xff1a;&#xff08;简单做个记录方便以后理解&a…

数据分析:16s差异分析DESeq2 | Corncob | MaAsLin2 | ALDEx2

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍DESeq2原理计算步骤结果Corncob原理计算步骤结果MaAsLin2原理计算步骤结果ALDEx2原理计算步骤结果加载R包数据链接数据预处理微生物数据样本信息提取物种名称过滤零值保留结果读取…

【CSS】标准怪异盒模型

概念 CSS 盒模型本质上是一个盒子&#xff0c;盒子包裹着HTML 元素&#xff0c;盒子由四个属性组成&#xff0c;从内到外分别是&#xff1a;content 内容、padding 内填充、border 边框、外边距 margin 盒模型的分类 W3C 盒子模型(标准盒模型) IE 盒子模型(怪异盒模型) 两种…

C++builder中的人工智能(18):神经网络中的SoftMax函数

在这篇文章中&#xff0c;我们将探讨SoftMax函数在神经网络中的作用&#xff0c;如何在人工神经网络&#xff08;ANN&#xff09;中使用SoftMax函数&#xff0c;以及在AI技术中SoftMax的应用场景。让我们来详细解释这些概念。 SoftMax函数是什么&#xff1f; SoftMax函数是逻辑…

机器学习(七)——集成学习(个体与集成、Boosting、Bagging、随机森林RF、结合策略、多样性增强、多样性度量、Python源码)

目录 关于1 个体与集成2 Boosting3 Bagging与随机森林4 结合策略5 多样性X 案例代码X.1 分类任务-Adaboost-SVMX.1.1 源码X.1.2 数据集&#xff08;鸢尾花数据集&#xff09;X.1.3 模型效果 X.2 分类任务-随机森林RFX.2.1 源码X.2.2 数据集&#xff08;鸢尾花数据集&#xff09…

Matlab轻松烟雾检测

小编经验分享&#xff1a;如何使用Matlab进行烟雾检测 烟雾检测是一项重要的安全技术&#xff0c;它可以帮助我们及时发现火灾风险并采取相应的措施。在这篇文章中&#xff0c;小编将和大家分享如何使用Matlab进行烟雾检测的经验。希望这些经验对大家在实际应用中能够有所帮助…

c语言其实很简单----【数组】

TOC 1.输入10个学生成绩&#xff0c;计算及格人数&#xff0c;平均成绩&#xff0c;总成绩。 #include<stdio.h> int main(){float score[10];int i ,cut;float avar0.0,sum0.0;for(i0;i<10;i)scanf("%f",&score[i]);//输入10个学生的成绩cut0;for(i0…

在 .NET 6.0 中创建用于 CRUD 操作的 Web API

快速概述&#xff1a; 在动态的技术世界中&#xff0c;创建强大的 Web API 已成为开发人员不可或缺的关键技能。这些 API 是促进不同应用程序之间顺畅通信的重要链接&#xff0c;可实现无缝数据检索和操作。本文的重点是在 .NET 6 中为 CRUD 操作创建 Web API。 为了实现这一点…

lua 编译网路核心

下载 Severity Code Description Project File Line Suppression State Details Error LNK1104 cannot open file lua53.lib mime D:\MyWork\lua\luasocket-master\luasocket-master\LINK 1 2> Creating library Release\soc…

SystemC学习(4)— 在VCS中运行SystemC

SystemC学习&#xff08;4&#xff09;— 在VCS中运行SystemC 一、前言 参考&#xff1a;VCS编译verilog&SystemC 二、仅包含SystemC的仿真 源文件使用上一篇&#xff1a;SystemC学习&#xff08;3&#xff09;— APB_SRAM的建模与测试 编写makefile如下所示&#xff…

Qt第三课 ----------布局

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

MySQL本地安装及密码重置常见错误处理

文章目录 一、MySQL下载二、配置环境变量三、MySQL初始化1.初始化MySQL数据库2.安装MySQL服务3.启动MySQL服务 四、密码重置 一、MySQL下载 官网地址&#xff1a;https://dev.mysql.com/downloads/mysql/5.5.html#downloads 下载完成后&#xff0c;直接解压缩到D盘 二、配置…

TBB开启并行编程之旅

本文基于小彭老师TBB课程&#xff0c;并对部分晦涩知识添加了更详细的解释与示例 第0章&#xff1a;从并发到并行 停滞的摩尔定律 你醒啦&#xff1f;免费午餐结束了&#xff01; 摩尔定律具体内容我们就不再提&#xff0c;从上图可以看到晶体管的密度的确仍在指数增长&…

「QT」几何数据类 之 QPointF 浮点型点类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

青藤深度参编的终端安全国家标准正式发布

近日&#xff0c;国家市场监督管理总局、国家标准化管理委员会发布中华人民共和国国家标准公告&#xff0c;由TC260&#xff08;全国网络安全标准化技术委员会&#xff09;归口&#xff0c;公安部第三研究所牵头的GB/T 29240-2024《网络安全技术 终端计算机通用安全技术规范》&…