位置: IT常识 - 正文

React中实现keepalive组件缓存效果(react keepalive)

编辑:rootadmin
React中实现keepalive组件缓存效果

推荐整理分享React中实现keepalive组件缓存效果(react keepalive),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react-keep-alive,react keep-alive,react keycloak,react-keep-alive,react keeplive,react-keep-alive,react keep,react keep,内容如对您有帮助,希望把文章链接给更多的朋友!

背景:由于react官方并没有提供缓存组件相关的api(类似vue中的keepalive),在某些场景,会使得页面交互性变的很差,比如在有搜索条件的表格页面,点击某一条数据跳转到详情页面,再返回表格页面,会重新请求数据,搜索条件也将清空,用户得重新输入搜索条件,再次请求数据,大大降低办公效率,如图:

目标:封装keepalive缓存组件,实现组件的缓存,并暴露相关方法,可以手动清除缓存。

React中实现keepalive组件缓存效果(react keepalive)

版本:React 17,react-router-dom 5

结构:

代码:

cache-types.js

// 缓存状态export const CREATE = 'CREATE'; // 创建export const CREATED = 'CREATED'; // 创建成功export const ACTIVE = 'ACTIVE'; // 激活export const DESTROY = 'DESTROY'; // 销毁

 CacheContext.js

import React from 'react';const CacheContext = React.createContext();export default CacheContext;

cacheReducer.js

import * as cacheTypes from "./cache-types";function cacheReducer(cacheStates = {}, { type, payload }) { switch (type) { case cacheTypes.CREATE: return { ...cacheStates, [payload.cacheId]: { scrolls: {}, // 缓存滚动条,key: dom, value: scrollTop cacheId: payload.cacheId, // 缓存Id element: payload.element, // 需要渲染的虚拟DOM doms: undefined, // 当前的虚拟dom所对应的真实dom status: cacheTypes.CREATE,// 缓存状态 }, }; case cacheTypes.CREATED: return { ...cacheStates, [payload.cacheId]: { ...cacheStates[payload.cacheId], doms: payload.doms, status: cacheTypes.CREATED, }, }; case cacheTypes.ACTIVE: return { ...cacheStates, [payload.cacheId]: { ...cacheStates[payload.cacheId], status: cacheTypes.ACTIVE, }, }; case cacheTypes.DESTROY: return { ...cacheStates, [payload.cacheId]: { ...cacheStates[payload.cacheId], status: cacheTypes.DESTROY, }, }; default: return cacheStates; }}export default cacheReducer;

KeepAliveProvider.js

import React, { useReducer, useCallback } from "react";import CacheContext from "./CacheContext";import cacheReducer from "./cacheReducer";import * as cacheTypes from "./cache-types";function KeepAliveProvider(props) { let [cacheStates, dispatch] = useReducer(cacheReducer, {}); const mount = useCallback( ({ cacheId, element }) => { // 挂载元素方法,提供子组件调用挂载元素 if (cacheStates[cacheId]) { let cacheState = cacheStates[cacheId]; if (cacheState.status === cacheTypes.DESTROY) { let doms = cacheState.doms; doms.forEach((dom) => dom.parentNode.removeChild(dom)); dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } }); // 创建缓存 } } else { dispatch({ type: cacheTypes.CREATE, payload: { cacheId, element } }); // 创建缓存 } }, [cacheStates] ); let handleScroll = useCallback( // 缓存滚动条 (cacheId, { target }) => { if (cacheStates[cacheId]) { let scrolls = cacheStates[cacheId].scrolls; scrolls[target] = target.scrollTop; } }, [cacheStates] ); return ( <CacheContext.Provider value={{ mount, cacheStates, dispatch, handleScroll }} > {props.children} {/* cacheStates维护所有缓存信息, dispatch派发修改缓存状态*/} {Object.values(cacheStates) .filter((cacheState) => cacheState.status !== cacheTypes.DESTROY) .map(({ cacheId, element }) => ( <div id={`cache_${cacheId}`} key={cacheId} // 原生div中
本文链接地址:https://www.jiuchutong.com/zhishi/293062.html 转载请保留说明!

上一篇:训练自己的GPT2模型(中文),踩坑与经验(训练自己的GPT模型 中文改英文)

下一篇:楚格峰山顶的缆车站,德国格赖瑙市 (© Robert Jank/Alamy)(德国楚格峰一日游攻略)

  • 支付宝最近转账联系人怎么删除(支付宝最近转账人是不是一定转过账)

    支付宝最近转账联系人怎么删除(支付宝最近转账人是不是一定转过账)

  • switch如何关机而不是待机(ns switch怎么关机)

    switch如何关机而不是待机(ns switch怎么关机)

  • 怎么关闭展示微信号(微信关闭展示微信号)

    怎么关闭展示微信号(微信关闭展示微信号)

  • 键盘打不出英文双引号(键盘打不出英文字母只能打数字键)

    键盘打不出英文双引号(键盘打不出英文字母只能打数字键)

  • 接口错误是什么意思(接口出现错误)

    接口错误是什么意思(接口出现错误)

  • word打印时候页码不见了(word打印的时候为什么页数变多了)

    word打印时候页码不见了(word打印的时候为什么页数变多了)

  • oppo手机自启动管理在哪里设置(OPPO手机自启动是什么意思)

    oppo手机自启动管理在哪里设置(OPPO手机自启动是什么意思)

  • 计算机网络使用范围划分为(计算机网络使用双绞线连接时,常用什么接头)

    计算机网络使用范围划分为(计算机网络使用双绞线连接时,常用什么接头)

  • 在对幻灯片进行自定义动画设置时可以改变的是(在对幻灯片进行自定义动画设置时可以改变)

    在对幻灯片进行自定义动画设置时可以改变的是(在对幻灯片进行自定义动画设置时可以改变)

  • 手机打字如何换下一行(手机打字如何换皮肤)

    手机打字如何换下一行(手机打字如何换皮肤)

  • 华为荣耀v30耗电快怎么解决(华为荣耀v30耗电怎么样)

    华为荣耀v30耗电快怎么解决(华为荣耀v30耗电怎么样)

  • 手机电量一直是100怎么办(手机电量一直是1%怎么办,充电充不进,用的时间也挺久的)

    手机电量一直是100怎么办(手机电量一直是1%怎么办,充电充不进,用的时间也挺久的)

  • 支付宝绑定的淘宝账号异常怎么解决(支付宝绑定的淘宝账号怎么解除)

    支付宝绑定的淘宝账号异常怎么解决(支付宝绑定的淘宝账号怎么解除)

  • 苹果手机软件购买怎么退订(苹果手机软件购买是什么意思)

    苹果手机软件购买怎么退订(苹果手机软件购买是什么意思)

  • 手机啥也没有内存满了(手机里面没什么但是没内存)

    手机啥也没有内存满了(手机里面没什么但是没内存)

  • 五g卡4g手机能用吗(五g手机4g卡可以用5g网络吗)

    五g卡4g手机能用吗(五g手机4g卡可以用5g网络吗)

  • .ts是什么文件(tst属于什么文件)

    .ts是什么文件(tst属于什么文件)

  • 奔腾e6500相当于i几(奔腾e6700相当于i几)

    奔腾e6500相当于i几(奔腾e6700相当于i几)

  • vivonex3支持红外遥控吗(vivonex3s红外线在哪)

    vivonex3支持红外遥控吗(vivonex3s红外线在哪)

  • spring clude和dubbo区别(springbamboo)

    spring clude和dubbo区别(springbamboo)

  • vivoU1的上市时间(vivoiqoou1上市时间)

    vivoU1的上市时间(vivoiqoou1上市时间)

  • 苹果手机拷贝的内容在哪里(苹果手机拷贝的内容怎么粘贴)

    苹果手机拷贝的内容在哪里(苹果手机拷贝的内容怎么粘贴)

  • 怎么查银行预留手机号(怎么查银行预留信息)

    怎么查银行预留手机号(怎么查银行预留信息)

  • 腾讯电脑管家中腾讯新闻是什么?(腾讯电脑管家中的软件搬家)

    腾讯电脑管家中腾讯新闻是什么?(腾讯电脑管家中的软件搬家)

  • 最短命的iPad是什么(ipad最长使用时间)

    最短命的iPad是什么(ipad最长使用时间)

  • 将json字符串与实体类互相转换(json与json字符串)

    将json字符串与实体类互相转换(json与json字符串)

  • dip命令  用于IP拨号连接(ip add命令是什么意思)

    dip命令 用于IP拨号连接(ip add命令是什么意思)

  • 母子公司换股协议
  • 印花税的三种缴税方式
  • 小规模纳税人现金折扣算增值税吗
  • 向境外分配股息
  • 购销印花税会计分录
  • 出口转内销增值税报表怎么填
  • 非盈利组织的好处
  • 去年12月份到现在有多少天了
  • 计生用品增值税减免税申报明细表怎么填
  • 宜宾劳务公司有哪些
  • 印花税计入股票成本吗
  • 金税盘费用到期
  • 增值税有没有定额抵扣
  • 其他应收款预算会计需要做账吗
  • 企业向国有银行贷款的利率
  • 破产清算重整和解
  • 因税负低补缴上年度增值税分录怎么写?
  • 借主营业务成本贷应付账款
  • 关于积分的三种账务处理方法
  • mac系统屏幕
  • 费用发票可以抵扣吗
  • 跨年发票税务处理两大原则
  • php中实现文件的上传需要使用哪个全局变量
  • 航天信息服务费发票哪里打印
  • 企业所得税直接法和间接法
  • uniapp自定义组件模式
  • linux入门学习
  • php io操作
  • 企业投资入股要交企业所得税吗
  • Cusco Cathedral on the Plaza de Armas, Cusco, Peru (© sharptoyou/Shutterstock)
  • 爱德华王子岛的气候
  • 桥梁水泥和普通水泥有什么区别
  • 艾罗芒阿
  • 薄雾笼罩怎么写
  • php循环字符串
  • 报废机器设备如何缴纳增值税
  • 应付利息和利息支出什么时候用
  • 酒类包装物押金的增值税处理规定
  • SQLite3中的日期时间函数使用小结
  • 汽车租赁属于有形动产融资租赁服务?
  • 上季度忘记申报个税了
  • 应交税费核算范围
  • 个人独资企业需要会计做账吗
  • 向投资者发放现金红利
  • 公司水电费分摊怎么算
  • 检测费用开票税率
  • 无形资产计提减值准备计算
  • 过年给员工派红包合适吗
  • 固定资产的主要特征
  • 手写账目表格怎么做
  • 继续教育专项附加扣除可以扣几年
  • 出口退税过期怎么处理
  • 未缴纳或未足额缴纳出资的股东
  • 企业内账怎么做
  • 实收资本包括哪些项目
  • php 访问数据库
  • MySQL PXC构建一个新节点只需IST传输的方法(推荐)
  • 怎么停止u盘自动运行
  • centos7挂载
  • win8.1流畅吗
  • 开启电脑上帝模式
  • win7系统怎么把c盘的内存加到d盘
  • 一打字就出现windows设置
  • win10系统怎么设置最好
  • 怎么在手机上买股票开户
  • win7无法更改工作组
  • opengl纹理错误变成条纹
  • 拦截器 aop
  • 压缩的linux命令
  • unity的脚本
  • shell输出1到100
  • python tkinter tabview
  • vuex状态机
  • javascript运行速度
  • python魔法方法有啥用
  • js正则regexp
  • 税务稽查追溯时间是什么意思
  • 电子税务局怎么添加银行账户信息
  • 天府新区劳动局投诉电话
  • 税务绩效工作存在的问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设