当前位置: 首页 > news >正文

umi4 项目使用 keepalive 缓存页面(umi-plugin-keep-alive、react-activation)

umi4使用keepalive

配置文件config\config.ts

export default defineConfig({plugins: ['umi-plugin-keep-alive'],
});

安装add umi-plugin-keep-alive

yarn add umi-plugin-keep-alive

页面 A

import { KeepAlive, history, useAliveController } from '@umijs/max';
const PageA = () => {const [count, setCount] = useState(0);const { drop } = useAliveController();return (<div><p>{count}</p><buttononClick={() => {// 跳转前先清除缓存drop('details').then(() => {history.push('/info-details');});}}>点击进入详情页</button></div>);
};export default () => (<KeepAlive name="page-A"><PageA /></KeepAlive>
);

页面 B

import { KeepAlive, history, useAliveController } from '@umijs/max';
const PageB = () => {const [count, setCount] = useState(0);const { drop } = useAliveController();return (<div><p>{count}</p> <buttononClick={() => {// 跳转前先清除缓存drop('details').then(() => {history.push('/info-details');});}}>点击进入详情页</button></div>);
};export default () => (<KeepAlive name="page-b"><PageB /></KeepAlive>
);

详情页

import { KeepAlive } from '@umijs/max';
const Details= () => {const [count, setCount] = useState(0);return <div>{count}</div>;
};export default () => (<KeepAlive name="details"><Details/></KeepAlive>
);

在这里插入图片描述

官网链接:https://github.com/CJY0208/react-activation/blob/master/README_CN.md

使用 withAliveScope 或 useAliveController 获取控制函数

  • drop(name): ("卸载"仅可用于缓存状态下的节点,如果节点没有被缓存但需要清空缓存状态,请使用 “刷新” 控制)

按 name 卸载缓存状态下的 节点,name 可选类型为 String 或 RegExp,注意,仅卸载命中 的第一层内容,不会卸载 中嵌套的、未命中的

  • dropScope(name): ("卸载"仅可用于缓存状态下的节点,如果节点没有被缓存但需要清空缓存状态,请使用 “刷新” 控制)

按 name 卸载缓存状态下的 节点,name 可选类型为 String 或 RegExp,将卸载命中 的所有内容,包括 中嵌套的所有

  • refresh(name):

按 name 刷新缓存状态下的 节点,name 可选类型为 String 或 RegExp,注意,仅刷新命中 的第一层内容,不会刷新 中嵌套的、未命中的

  • refreshScope(name):

按 name 刷新缓存状态下的 节点,name 可选类型为 String 或 RegExp,将刷新命中 的所有内容,包括 中嵌套的所有

  • clear():

将清空所有缓存中的 KeepAlive

  • getCachingNodes():

获取所有缓存中的节点

自动缓存

给需要控制缓存的 标签增加 when 属性,取值如下

当 when 类型为 Boolean 时
  • true: 卸载时缓存
  • false: 卸载时不缓存
<KeepAlive when={true}>
当 when 类型为 Array 时
  • 第 1 位参数表示是否需要在卸载时缓存
  • 第 2 位参数表示是否卸载 的所有缓存内容,包括 中嵌套的所有
<KeepAlive when={[false, true]}>
当 when 类型为 Function 时(建议使用这种方式)

返回值为上述 Boolean 或 Array,依照上述说明生效

但 when 的最终计算时机调整到 组件 componentWillUnmount 时,可避免大部分 when 属性没有达到预期效果的问题

<KeepAlive when={() => true}>
<KeepAlive when={() => [false, true]}>

报错信息

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

const PageA = () => (<div>PageA</div>
)export default () => <KeepAlive> <PageA /></KeepAlive>

问题:存在空格,删除空格即可

const PageA = () => (<div>PageA</div>
)export default () => <KeepAlive><PageA /></KeepAlive>

相关文章:

umi4 项目使用 keepalive 缓存页面(umi-plugin-keep-alive、react-activation)

umi4使用keepalive 配置文件config\config.ts export default defineConfig({plugins: [umi-plugin-keep-alive], });安装add umi-plugin-keep-alive yarn add umi-plugin-keep-alive页面 A import { KeepAlive, history, useAliveController } from umijs/max; const Page…...

new;getline();重载<<和>>

面向对象程序设计的优点&#xff1a; 易维护易扩展模块化&#xff1a;通过设置访问级别&#xff0c;限制别人对自己的访问&#xff0c;保护了数据安全 int main(){ return 0;} 返回值0在windows下编程一般没用&#xff0c;但是在linux中编程&#xff0c;返回值有时有用 汇编与…...

python报错

Missing optional dependency ‘xlrd’. Install xlrd > 1.0.0 for Excel support Use pip or conda to install xlrd 安装xlrd库...

Android14 Handle机制

Handle是进程内部, 线程之间的通信机制. handle主要接受子线程发送的数据, 并用此数据配合主线程更新UI handle可以分发Message对象和Runnable对象到主线程中, 每个handle实例, 都会绑定到创建他的线程中, 它有两个作用,: (1) 安排消息在某个主线程中某个地方执行 (2) 安排…...

spark 总结

1.spark 配置文件 spark-default.conf spark.yarn.historyServer.address xiemeng-01:18080 spark.history.port18080 hive-site.xml <configuration><property><name>javax.jdo.option.ConnectionURL</name> </property><property>&…...

Gitlab修改仓库权限为public、Internal、Private

Public&#xff08;公开&#xff09;&#xff1a;所有人都可以访问该仓库&#xff1b; Internal&#xff08;内部&#xff09;&#xff1a;同一个GitLab群组或实例内的所有用户都可以访问该仓库&#xff1b; Private&#xff08;私人&#xff09;&#xff1a;仅包括指定成员的用…...

Python语言例题集(008)

#!/usr/bin/python3 #建立链表类和遍历此链表 class Node(): def init(self,dataNone): self.datadata self.nextNone class LinkedList(): def init(self): self.headNone def printList(self):ptrself.headwhile ptr:print(ptr.data)ptrptr.nextlinkLinkedList() link.he…...

【Java核心能力】京东并行框架asyncTool如何针对高并发场景进行优化?

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…...

如何在Mapbox GL中处理大的GEOJSON文件

Mapbox GL可以将 GeoJSON 数据由客户端(Web 浏览器或移动设备)即时转换为 Mapbox 矢量切片进行显示和处理。本文的目的是教大家如何有效加载和渲染大型 GeoJSON 源,并优化渲染显示速度,增强用户体验,减少客户端卡顿问题。本文以Mapbox 为例,至于其它框架原理大致相同,可…...

Vue.js过滤器:让数据展示更灵活

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

【深度学习笔记】计算机视觉——FCN(全卷积网络

全卷积网络 sec_fcn 如 :numref:sec_semantic_segmentation中所介绍的那样&#xff0c;语义分割是对图像中的每个像素分类。 全卷积网络&#xff08;fully convolutional network&#xff0c;FCN&#xff09;采用卷积神经网络实现了从图像像素到像素类别的变换 :cite:Long.Sh…...

物联网行业如何发展新质生产力

物联网行业作为当今科技发展的前沿领域&#xff0c;其在新质生产力的提升中扮演着举足轻重的角色。为了推动物联网行业的快速发展&#xff0c;我们需要从技术创新、产业融合、人才培养和政策支持等多个方面入手&#xff0c;共同构建一个有利于物联网行业发展的生态环境。 首先…...

manjaro 安装 wps 教程

内核: Linux 6.6.16.2 wps-office版本&#xff1a; 11.10.11719-1 本文仅作为参考使用, 如果以上版本差别较大不建议参考 安装wps主体 yay -S wps-office 安装wps字体 &#xff08;如果下载未成功看下面的方法&#xff09; yay -S ttf-waps-fonts 安装wps中文语言 yay …...

Spring AOP基于注解方式实现

1. 场景介绍 目前假设我们有一个计算器类&#xff0c;并要为其中的方法添加日志功能。 计算器类如代码所示&#xff1a; public interface Calculator {int add(int i, int j);int sub(int i, int j);int mul(int i, int j);int div(int i, int j);}public class Calculator…...

MySQL中常用的操作语句已汇总

目录 一、库语句 1.查询现有数据库 2.创建数据库 3.选中数据库 ​编辑 4.删除数据库 二、初阶表操作 1.查看数据库现有表 2.查看表结构 3.创建表 4.删除表 5.全列查询 6.删除表2 7.修改操作 三、插入操作 1.全列插入 2.指定列插入 3.一次插入多组数据 4.插入…...

linux设置nginx systemctl启动

生成nginx.pid文件 #验证nginx的配置&#xff0c;并生成nginx.pid文件 /usr/local/nginx/sbin/nginx -t #pid文件目录在 /usr/local/nginx/run/nginx.pid 设置systemctl启动nginx #添加之前需要先关闭启动状态的nginx&#xff0c;让nginx是未启动状态 #关闭nginx /usr/local…...

stable diffusion faceswaplab换脸插件报错解决

错误提示&#xff1a; ERROR - Failed to swap face in postprocess method : apply_overlay() takes 3 positional arguments but 4 were given 打开插件对应目录&#xff1a; \sd-webui-aki-v4.6.1\extensions\sd-webui-faceswaplab\scripts\faceswaplab_utils中 imgutil…...

Kap - macOS 开源录屏工具

文章目录 关于 Kap 关于 Kap Kap 是一个使用web技术的开源的屏幕录制工具 官网&#xff1a;https://getkap.cogithub : https://github.com/wulkano/Kap 目前只支持 macOS 12 以上&#xff0c;支持 Intel 和 Apple silicon 你可以前往官网&#xff0c;右上方下载 你也可以使…...

Linux/Ubuntu/Debian基本命令:光标移动命令

Linux系统真的超级好用&#xff0c;免费&#xff0c;有很多开源且功能强大的软件。尤其是Ubuntu&#xff0c;真的可以拯救十年前的老电脑。从今天开始我将做一个Linux的推广者&#xff0c;推广普及Linux基础。 光标移动命令对于在终端&#xff08;Terminal&#xff09;内有效导…...

nvm下载,nodejs下载

进入nvm中文网&#xff0c;按照它的教程来&#xff0c;很简单&#xff01;&#xff01;&#xff01; 往下翻...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...