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

  • 苹果13支持nfc门禁卡吗(苹果13支持nfc功能)

    苹果13支持nfc门禁卡吗(苹果13支持nfc功能)

  • 苹果13怎么换全套主题的软件(苹果13怎么换全面屏模式)

    苹果13怎么换全套主题的软件(苹果13怎么换全面屏模式)

  • 445端口是什么服务(445端口是什么服务54)

    445端口是什么服务(445端口是什么服务54)

  • 华为Nova5pro如何分屏(华为nova5pro如何关闭纯净模式)

    华为Nova5pro如何分屏(华为nova5pro如何关闭纯净模式)

  • 退款已还至下月账单什么意思(退款退至下个月是什么情况)

    退款已还至下月账单什么意思(退款退至下个月是什么情况)

  • 电脑外置摄像头模糊怎么办(台式电脑外置摄像头)

    电脑外置摄像头模糊怎么办(台式电脑外置摄像头)

  • 微信被别人盗了手机号被换了怎么办(微信被别人盗了钱包里的钱怎么办)

    微信被别人盗了手机号被换了怎么办(微信被别人盗了钱包里的钱怎么办)

  • 微信测试版怎么恢复正式版(微信测试版怎么取消)

    微信测试版怎么恢复正式版(微信测试版怎么取消)

  • wps口内打勾快捷键是什么(wps office 打勾)

    wps口内打勾快捷键是什么(wps office 打勾)

  • 苹果x手机led灯怎么设置(苹果x设置led灯闪烁)

    苹果x手机led灯怎么设置(苹果x设置led灯闪烁)

  • 手机youtube年龄限制解除?(youtube年龄限制中国大陆手机)

    手机youtube年龄限制解除?(youtube年龄限制中国大陆手机)

  • 苹果锁屏时间能下移吗(苹果锁屏时间能改成之前的吗)

    苹果锁屏时间能下移吗(苹果锁屏时间能改成之前的吗)

  • 共享充电宝有定位吗(福电共享充电宝)

    共享充电宝有定位吗(福电共享充电宝)

  • 快手封禁审核需要多久(快手封禁审核需要几天)

    快手封禁审核需要多久(快手封禁审核需要几天)

  • 网上买笔记本电脑需要注意哪些问题(网上买笔记本电脑送鼠标吗)

    网上买笔记本电脑需要注意哪些问题(网上买笔记本电脑送鼠标吗)

  • 苹果x面容id密码忘了怎么办(平果x面容id和密码)

    苹果x面容id密码忘了怎么办(平果x面容id和密码)

  • 为什么验证码发不过来(为什么验证码发不出去)

    为什么验证码发不过来(为什么验证码发不出去)

  • 网桥在osi哪一层(网桥工作在osi体系的传输层对吗)

    网桥在osi哪一层(网桥工作在osi体系的传输层对吗)

  • b站上传视频审核要多久(b站上传视频不过审)

    b站上传视频审核要多久(b站上传视频不过审)

  • 苹果手机不更新系统会怎样(苹果手机不更新会影响网络吗)

    苹果手机不更新系统会怎样(苹果手机不更新会影响网络吗)

  • 苹果夜间模式有什么用(苹果夜间模式开了有什么用)

    苹果夜间模式有什么用(苹果夜间模式开了有什么用)

  • 铃声多多添加本地音乐方法(铃声多多添加本地音乐)

    铃声多多添加本地音乐方法(铃声多多添加本地音乐)

  • 荣耀手环3能不能接电话(荣耀手环3能不能刷门禁卡)

    荣耀手环3能不能接电话(荣耀手环3能不能刷门禁卡)

  • windows错误蓝屏怎么办(win10蓝屏系统错误)

    windows错误蓝屏怎么办(win10蓝屏系统错误)

  • 旺旺号降权多久能恢复(旺旺号降权多久恢复可以查到是哪单被降了?)

    旺旺号降权多久能恢复(旺旺号降权多久恢复可以查到是哪单被降了?)

  • seid是什么意思(手机seid是什么意思)

    seid是什么意思(手机seid是什么意思)

  • 华为p30时间在哪里设置(华为p30时间显示设置在哪里)

    华为p30时间在哪里设置(华为p30时间显示设置在哪里)

  • 华为nova3充电器型号(华为nova3充电器型号图片)

    华为nova3充电器型号(华为nova3充电器型号图片)

  • 苹果之间怎么传app(苹果之间怎么传输)

    苹果之间怎么传app(苹果之间怎么传输)

  • 一次性购入固定资产投资收益
  • 退回代征手续费怎么做会计分录
  • 小规模收入超过多少必须转一般纳税人
  • 个人股权转让给公司
  • 资产处置收益对应科目
  • 技改贴息资金的财务、会计及税收处理
  • 房租转租怎么处理合法
  • 收回赔款会计分录
  • 增值税一般纳税人认定标准
  • 独资企业需要交企业所得税吗
  • 工程项目产生的沙石怎么处理
  • 应收账款挂账要开票吗
  • 企业的其他业务收入有
  • 资产减值损失填在资产负债表哪里
  • 增值税 附加税
  • 企业的团队建设之荒野求生
  • win10 bios设置
  • mac只能读不能写
  • 怎么写会计凭证
  • 会计监督的基本规定有哪些
  • win10通知怎么打开
  • 运输行业增值税税负率是多少
  • 股东分配利润如何入账
  • 顺流交易合并抵消 chenyiwei
  • 租金没有收进来,房产税要交吗
  • aliwssv.exe是什么进程
  • xwizard.exe是什么
  • win7家庭组怎么用
  • Yii使用技巧大汇总
  • 三元运算符判断闰年php
  • 质量事故责任书
  • wamp环境搭建的过程
  • 微信小程序项目中app.js文件是全局样式文件
  • php经典面试题及答案
  • nginx怎么运行php
  • 可供出售金融资产和交易性金融资产
  • 固定资产加速折旧是什么意思
  • 跨境电商小规模运营负责那些工作
  • 计提工资的时候跟发放的时候不一样怎么办
  • 小规模所得税怎么计算公式
  • 预提的费用当年必须冲掉吗
  • 一般纳税人应交税费二级科目有哪些
  • 进仓费开票是几个点
  • 捐赠纳税调整额怎么算
  • 发票服务内容写错怎么办
  • 子公司与母公司承担连带责任
  • 汽车以租代购可靠吗
  • 信用证保证金的计算公式
  • 个人垫付的费用如何向单位报销行政单位
  • 不动产经营租赁会计分录
  • 记账凭证必须具备的基本内容
  • 加班餐补需要发票嘛
  • 发票右上角打印缺数字
  • 联营企业和子公司哪个好
  • 奖励罚款怎么做分录
  • 账务处理程序和财务处理程序
  • mysql最多多少行
  • mysqld占用cpu高
  • mysql类似软件
  • xp系统ip地址设置在哪里
  • 电脑ios怎么安装
  • assoc .exe=exefile是什么
  • win7怎么设置鼠标双击打开
  • win builds
  • ie6浏览器兼容模式怎么设置在哪里
  • 简单模拟电路图
  • android开发项目实战+源码教程
  • node.js使用方法
  • vue2.x
  • JavaScript基础教程
  • jquery设置滚动条
  • Android优化蓝牙
  • jQuery插件封装时如要实现链式编程,需要
  • 阿里云服务器使用教程
  • 资产划转是什么会计科目
  • 山西电子税务局官网app
  • 一般纳税人简易征收会计分录
  • 劳务派遣服务计税
  • 浙江省税务发票
  • 长春税务局电话朝阳区
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设