位置: 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)(德国楚格峰一日游攻略)

  • 苹果恢复出厂设置还能找回照片吗(苹果恢复出厂设置)(苹果恢复出厂设置能清干净吗)

    苹果恢复出厂设置还能找回照片吗(苹果恢复出厂设置)(苹果恢复出厂设置能清干净吗)

  • 黑胶vip自动续费怎么关闭(取消黑胶vip自动续费)

    黑胶vip自动续费怎么关闭(取消黑胶vip自动续费)

  • 苹果12有几款机型(苹果12有几款机型有什么区别)

    苹果12有几款机型(苹果12有几款机型有什么区别)

  • 小程序提示微信版本过低(小程序提示微信版本过低无法更新)

    小程序提示微信版本过低(小程序提示微信版本过低无法更新)

  • 苹果手机更新软件大于200m怎么办(苹果手机更新软件为什么总显示以前的id)

    苹果手机更新软件大于200m怎么办(苹果手机更新软件为什么总显示以前的id)

  • 苹果手机充电器充电不进怎么回事(苹果手机充电器插上没反应怎么回事)

    苹果手机充电器充电不进怎么回事(苹果手机充电器插上没反应怎么回事)

  • 苹果11为什么后面没有英文(苹果11为什么后盖破损严重)

    苹果11为什么后面没有英文(苹果11为什么后盖破损严重)

  • 为什么微信不能二次转发名片(为什么微信不能@所有人)

    为什么微信不能二次转发名片(为什么微信不能@所有人)

  • 卖家给买家差评买家会知道吗(卖家给买家差评怎么办)

    卖家给买家差评买家会知道吗(卖家给买家差评怎么办)

  • ipad变卡了怎么办(ipad变卡了怎么清理)

    ipad变卡了怎么办(ipad变卡了怎么清理)

  • 电脑pe是什么意思(电脑的pe是什么意思)

    电脑pe是什么意思(电脑的pe是什么意思)

  • 戴尔电脑内屏碎了(戴尔电脑内屏碎了怎么换)

    戴尔电脑内屏碎了(戴尔电脑内屏碎了怎么换)

  • 腾讯课堂摄像头模式是什么(腾讯课堂摄像头打不开)

    腾讯课堂摄像头模式是什么(腾讯课堂摄像头打不开)

  • 录像回放不了怎么回事(录像回放没有图像是咋回事)

    录像回放不了怎么回事(录像回放没有图像是咋回事)

  • 怎么移动文件到另一个文件(怎么移动文件到别的盘)

    怎么移动文件到另一个文件(怎么移动文件到别的盘)

  • 有抖音号怎么看微信号(有抖音号怎么看别人的抖音)

    有抖音号怎么看微信号(有抖音号怎么看别人的抖音)

  • itunes能在安卓手机上下载吗(itunes能在安卓用吗)

    itunes能在安卓手机上下载吗(itunes能在安卓用吗)

  • 爱奇艺无法下载的原因(爱奇艺无法下载怎么办)

    爱奇艺无法下载的原因(爱奇艺无法下载怎么办)

  • 什么软件能让手机分屏(什么软件能让手机和电脑同屏)

    什么软件能让手机分屏(什么软件能让手机和电脑同屏)

  • iphonexs支持指纹解锁吗(苹果xs支持指纹解锁吗?)

    iphonexs支持指纹解锁吗(苹果xs支持指纹解锁吗?)

  • ios13怎么更新app(ios13怎么更新到ios16)

    ios13怎么更新app(ios13怎么更新到ios16)

  • ipadmini2支持笔吗(padmini2可以用笔吗)

    ipadmini2支持笔吗(padmini2可以用笔吗)

  • 苹果实况照片是什么意思(苹果实况照片是自己拍的吗)

    苹果实况照片是什么意思(苹果实况照片是自己拍的吗)

  • 魅族16如何分享网络(魅族16怎么互传)

    魅族16如何分享网络(魅族16怎么互传)

  • U盘PE启动安装GHOST系统图文教程(u启动pe装机工具怎么重装系统)

    U盘PE启动安装GHOST系统图文教程(u启动pe装机工具怎么重装系统)

  • 分享在php代码中调用帝国cms头部变量temp.header的方法(php微信分享源码)

    分享在php代码中调用帝国cms头部变量temp.header的方法(php微信分享源码)

  • c语言中局部变量是什么(c语言中局部变量和全局变量同名)

    c语言中局部变量是什么(c语言中局部变量和全局变量同名)

  • 小规模纳税人代收水电费税率
  • 年度纳税总额的时间怎么计算
  • 租赁费属于酌量收入吗
  • 银行电子承兑汇票怎么转让
  • 援企稳岗补贴的申请理由
  • 收到短期贷款会计分录
  • 私募基金管理公司
  • 高新技术企业研发人员占比
  • 修理固定资产取得增值税发票能否抵扣?
  • 包装物押金是含税价格吗
  • 出口退税的发票怎么做账
  • 因管理不善的材料盘亏如何做账
  • 受委托加工物资双方账务处理怎么做
  • 造价服务费收费标准计算器
  • 雇主责任险是否属于财产保险
  • 市政配套费交给哪个部门
  • 3%小规模纳税人开出的发票 农产品成本如何计算
  • 医疗收费票据可以补打吗
  • 填写a201030减免所得税优惠明细怎么填
  • 私对私转账是否缴纳个人所得税
  • 一个月无纳税凭证怎么处理
  • 勾选认证的发票怎么确认签名
  • 公司注销货币资金有余额要交税吗
  • 建筑业劳务分包怎样算税
  • 存货跌价准备会计科目编码
  • 个体户注销麻烦还是公司注销麻烦
  • 积分兑换的话费在使用后不再累计消费积分是什么意思
  • 取得进项税发票分录
  • 苹果Mac系统怎么切换输入法
  • 公司购买购物卡发给职工的账务处理
  • linux-4.4
  • 代理记账费用计入什么会计科目
  • 旅行社专票开票内容的规定
  • 斯塔尔德
  • 前端打包后生成文件
  • 合同内容和开票内容不一致
  • 当深度学习遇上Web开发:Spring和OpenAI如何实现图片生成?
  • Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试
  • thinkphp withjoin
  • 奖金的发放应做到
  • 游戏公司的主营业务是什么
  • 存货盘亏计入什么收入
  • 罚款属于其他业务收入吗
  • php cms
  • 盈余公积提取后需要结转吗
  • 应付职工薪酬的
  • 收据4联
  • mysql log
  • 发票税率开错了3%开成5%怎么办?
  • 客户多付的货款 不用退回 进营业外收入吗
  • 期末账项调整的内容包括
  • 银行收费错误当天能退吗
  • 销售折扣销货方式有哪些
  • 营业外收入记入企业的什么
  • 成本费用总额占营业总收入的比率
  • 企业风险管理有哪些方面
  • mysql批量添加字段
  • 通过实例认识MySQL中前缀索引的用法
  • win back什么意思
  • win10如何彻底清理
  • mac如何开启屏幕录制权限
  • win10如何动态桌面
  • 怎么修改win10登录名
  • centos7 vncserver
  • sbdrvdet.exe - sbdrvdet是什么进程 有什么用
  • Win10控制面板打不开
  • win8启动蓝屏
  • react native 应用
  • 基于贪心算法
  • python从入门到精通
  • jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
  • unity游戏换皮教程
  • JQuery解析XML数据的几个简单实例
  • Android中的布局有哪些
  • 保险的佣金一般是多少
  • 电子税务平台怎么红冲纸质发票
  • 微信密码忘记了,手机号也没有用了,怎么办
  • 浙江蹦极哪里好玩
  • 现行会计法律法规汇编2022版
  • 汽车燃油税每年要交吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设