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

React如何实现Vue的keepAlive功能

前言

在React中,默认情况下组件在被卸载后会销毁状态,这与Vue的keep-alive功能不同。在Vue中,keep-alive组件可以缓存组件状态,在路由切换时重新挂载。实现这一功能在React中并不简单,但我们可以借助一个第三方库——react-activation 来模拟Vue的keep-alive功能。

react-activation简介

可以看看github介绍:react-activation
react-activation 是一个用于React的状态保持库,可以缓存组件的状态和DOM,适用于多页面应用的路由缓存等场景。它的核心功能包括:

  • 缓存组件:在不卸载组件的情况下保存其状态和DOM。
  • 恢复组件:当组件重新激活时,可以保留之前的状态和DOM,而无需重新渲染。
  • 缓存控制:可以通过配置选项控制哪些组件需要缓存,哪些不需要。

react-activation安装

yarn add react-activation
# 或者
npm install react-activation

兼容性

  • React v16 / v17 / v18

  • Preact v10+

  • 兼容 SSR

注意!!!

  • 不要使用 <React.StrictMode /> 严格模式
  • (React v18+) 不要使用 ReactDOMClient.createRoot, 而是使用 ReactDOM.render

项目里代码实现

入口文件main.tsx

在不会被销毁的位置放置 外层,一般为应用入口处

import { render } from 'react-dom';
import { AliveScope } from 'react-activation';
render(<AliveScope><Router><App /></Router></AliveScope>,document.getElementById('root')
);

路由文件 router.tsx

export const routes = [{path: '/',element: <Home />,keepAlive: true},{path: '/home',element: <Home />,keepAlive: true},{path: '/xxx',element: <Index2 />},
]

App.tsx文件

这里可以根据router.tsx的配置看是否需要缓存, 引入KeepAlive组件,设置cacheKey来避免冲突

function App() {
const location = useLocation();
const route = useRoutes(routes.map(item => ({...item,element: item.keepAlive ? (<KeepAlive cacheKey={item.path}>{item.element}</KeepAlive>) : (item.element)})));// 这里根据是否为首页设置z-50是因为在首页有多个Popup,缓存了首页后点击Popup的里面内容跳转别的页面,这个Popup因为层级很高,并且和root是同级节点所以会一直存在,所以给这些Popup也要设置层级z-10,这样在跳转至别的页面时,这些Popup的层级10没有50高就不会出现
return (<divclassName={`w-full h-screen flex justify-center  bg-primary  relative ${location.pathname === '/home' || location.pathname === '/'? '': 'z-50'}`}><div className="w-[393px] h-screen">{route}</div></div>)
}

总结

react-activation 是一个非常实用的库,能够帮助我们在React中实现类似于Vue keep-alive的缓存功能。在单页面应用中,合理地使用KeepAlive来缓存组件,可以显著提升用户体验,减少重复渲染带来的性能消耗。 引入KeepAlive组件,设置cacheKey来避免冲突,是最重要的!

相关文章:

React如何实现Vue的keepAlive功能

前言 在React中&#xff0c;默认情况下组件在被卸载后会销毁状态&#xff0c;这与Vue的keep-alive功能不同。在Vue中&#xff0c;keep-alive组件可以缓存组件状态&#xff0c;在路由切换时重新挂载。实现这一功能在React中并不简单&#xff0c;但我们可以借助一个第三方库——…...

在 Ubuntu 22.04 LTS 上安装 NVM (Node Version Manager) 管理和切换不同版本的 Node.js npm

安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash# nvm --version 0.40.1安装 Node.js 的不同版本 列出所有可用的 Node.js 远程版本 nvm ls-remotenvm install v18.20.4# node --version v18.20.4# nvm current v18.20.4npm 是 …...

如何搭建题库管理小序❓

土著刷题小&#x1f34a;序不仅能够作为组织考试的利器&#xff0c;它同样可以帮助教育培训机构构建一个强大且高效的题库管理系统。 下面跟随我们的指导&#xff0c;一起来看看如何利用土著刷题小&#x1f34a;序轻松快捷地建立起自己的题库&#xff0c;并享受其所带来的诸多好…...

Spring Boot框架下校园社团信息管理的创新实践

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…...

vscode clangd for cuda 插件配置

这里写目录标题 1. 下载插件clangd,并且安装server到host2. 配置3. 安装调试插件 1. 下载插件clangd,并且安装server到host 步骤 extension下载 altshiftp, 下服务&#xff0c;如果下不下来请考虑用&#x1fa9c; 下载好后check一下&#xff0c;检查是否正常 正常的标志 注意…...

软件测试学习笔记丨SeleniumPO模式

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/22525 本文为霍格沃兹测试开发学社的学习经历分享&#xff0c;写出来分享给大家&#xff0c;希望有志同道合的小伙伴可以一起交流技术&#xff0c;一起进步~ 说明&#xff1a;本篇博客基于sel…...

研发效能DevOps: Vite 使用 Vue Router

目录 一、实验 1.环境 2.初始化前端项目 3.安装vue-router 4.Vite 使用 Vue Router 二、问题 1.运行出现空页面 2.Vue Router如何禁止页面回退 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统 软件版本备注Windows11VS Code1.94.2Node.jsv18.20.4(LT…...

记第一次本地编译seatunnel源码

拉取代码 git clone https://github.com/apache/seatunnel.git 使用版本 我们生产环境用的是2.3.5版本&#xff0c;所以基于2.3.5-release分支代码进行编译。 maven package过程 遇到的第一个问题&#xff1a;‘com.sun.tools.javac.tree.JCTree com.sun.tools.javac.tree…...

《云主机配置全攻略》

《云主机配置全攻略》 一、云主机配置的重要性二、配置云主机的关键要素&#xff08;一&#xff09;CPU 的选择&#xff08;二&#xff09;内存的考量&#xff08;三&#xff09;硬盘的抉择&#xff08;四&#xff09;带宽的确定&#xff08;五&#xff09;机房线路的考虑&…...

RHCE nginx架构和安装

nginx架构和安装 nginx架构和安装1.1 nginx架构1.2 安装nginx1.1.1 本地安装1.1.2 官网安装1.1.3 源码安装 1.3 控制服务1.4 页面自定义 nginx架构和安装 nginx是多进程组织模式&#xff0c;而且是一个由 Master 主进程和 Worker 工作进程组成 1.1 nginx架构 1.2 安装nginx …...

Jmeter自动化实战

一、前言 由于系统业务流程很复杂,在不同的阶段需要不同的数据,且数据无法重复使用,每次造新的数据特别繁琐,故想着能不能使用jmeter一键造数据 二、创建录制模板 可参考:jmeter录制接口 首先创建一个录制模板 因为会有各种请求头,cookies,签名,认证信息等原因,导致手动复制…...

构建高效的Java SOCKS5代理:从零开始的网络转发实现

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

spring-boot(绑定配置文件及应用)

配置文件 SpringBoot使用一个全局的配置文件&#xff0c;配置文件名是固定的&#xff1b; application.properties application.yml 配置文件的作用&#xff1a;修改SpringBoot自动配置的默认值&#xff1b;SpringBoot在底层都给我们自动配置好&#xff1b; YAML&#x…...

Mac OS 搭建MySQL开发环境

Mac OS 搭建MySQL开发环境 文章目录 Mac OS 搭建MySQL开发环境一、安装Mysql&#xff1a;二、配置环境变量三、安装Navicat 本地环境&#xff1a; Mac OS Sequoia15.0.1&#xff08;M3 Max) 目标状态&#xff1a; 下载安装Mysql&#xff0c;配置相关环境。 一、安装Mysql&…...

windows下安装python库wordCloud报错

换电脑安装wordcloud半天安装失败&#xff0c;记录一下遇到的坑&#xff0c;也给大家节省点时间。 方法1&#xff1a; 错误呢就是下面这个&#xff0c;说没c编译器&#xff0c;要不就去他给的地址上安装一下&#xff0c;我安装了一下好像没什么用&#xff0c;也没太敢勾选&am…...

Spring IOC 自动装配(注入)

注解⽅式注⼊ Bean 对于 bean 的注⼊&#xff0c;除了使⽤ xml 配置以外&#xff0c;可以使⽤注解配置。注解的配置&#xff0c;可以简化配置⽂件&#xff0c; 提⾼开发的速度&#xff0c;使程序看上去更简洁。对于注解的解释&#xff0c;Spring对于注解有专⻔的解释器&#…...

Go使用SIMD指令——以string转为整数为例

本文Go使用SIMD指令采用如下方式&#xff1a; C编写对应的程序clang编译成汇编c2goasm将上述生成的汇编转为go的汇编 准备工具 clang。直接使用apt-get install clang安装即可c2goasm。 go get -u github.com/minio/c2goasm来进行安装asm2plan9s。 go get -u github.com/min…...

分享资源合集

为了方便临时使用到的一些软件&#xff0c;提供百度网盘下载。 通过百度网盘分享的文件&#xff1a;WinHex 21.2 SR-2_x86_x64.exe 链接&#xff1a;https://pan.baidu.com/s/19RAnHl_VcKUcIKADU9z9Gw?pwd6666 提取码&#xff1a;6666 通过百度网盘分享的文件&#xff1a;Zi…...

C#/WinForm 鼠标穿透自定义区域截图(后续实现录屏)

效果 窗体截图录屏 git地址&#xff1a;https://gitee.com/feng-cai/screenshot-recording...

基于SpringBoot的“社区维修平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“社区维修平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 管理员登录页面 住户管理页面 社区公关管理页面 维…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

作为点的对象CenterNet论文阅读

摘要 检测器将图像中的物体表示为轴对齐的边界框。大多数成功的目标检测方法都会枚举几乎完整的潜在目标位置列表&#xff0c;并对每一个位置进行分类。这种做法既浪费又低效&#xff0c;并且需要额外的后处理。在本文中&#xff0c;我们采取了不同的方法。我们将物体建模为单…...