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

  • 载屏是什么意思(载湉两个字怎么读)

    载屏是什么意思(载湉两个字怎么读)

  • 怎么不让别人看淘宝主页(怎么不让别人看到微信运动步数)

    怎么不让别人看淘宝主页(怎么不让别人看到微信运动步数)

  • 移动花卡抖音怎么不显示免流(移动花卡抖音怎么不免流)

    移动花卡抖音怎么不显示免流(移动花卡抖音怎么不免流)

  • u盘大小规格(u盘大小规格排序(u盘大小规格))

    u盘大小规格(u盘大小规格排序(u盘大小规格))

  • PPT怎么整页加边框呢?(ppt怎么整页加边框)

    PPT怎么整页加边框呢?(ppt怎么整页加边框)

  • 拼多多为什么要做拼主(拼多多为什么要交保证金)

    拼多多为什么要做拼主(拼多多为什么要交保证金)

  • 腾讯视频中的自动续费怎么关闭(腾讯视频的自动播放怎么取消)

    腾讯视频中的自动续费怎么关闭(腾讯视频的自动播放怎么取消)

  • 手机有锁是什么意思(手机解不开锁了怎么办)

    手机有锁是什么意思(手机解不开锁了怎么办)

  • 如何去掉文档空白页(如何去掉文档空白页word)

    如何去掉文档空白页(如何去掉文档空白页word)

  • iphone音量键莫名弹出(苹果音量键一直乱跳)

    iphone音量键莫名弹出(苹果音量键一直乱跳)

  • 华为手机电池旁边的树叶是什么(华为手机电池旁边的小仪表盘)

    华为手机电池旁边的树叶是什么(华为手机电池旁边的小仪表盘)

  • 苹果平板a1566是什么型号(苹果平板a1566是什么时候生产的)

    苹果平板a1566是什么型号(苹果平板a1566是什么时候生产的)

  • 华为mate30带nfc功能吗(华为mate30有nfc)

    华为mate30带nfc功能吗(华为mate30有nfc)

  • 京东自营店是什么意思(京东自营店是什么模式)

    京东自营店是什么意思(京东自营店是什么模式)

  • 华为mate30呼吸灯在哪里设置(华为mate30呼吸灯在哪里)

    华为mate30呼吸灯在哪里设置(华为mate30呼吸灯在哪里)

  • qq怎样设置彩色群名片(如何设置qq颜色)

    qq怎样设置彩色群名片(如何设置qq颜色)

  • 群聊如何屏蔽个人相册(群聊如何屏蔽个人消息)

    群聊如何屏蔽个人相册(群聊如何屏蔽个人消息)

  • xsmax怎么开机(xsmax怎样开机)

    xsmax怎么开机(xsmax怎样开机)

  • 嘀嗒顺风车取消订单退款多久到账(嘀嗒顺风车取消行程扣钱吗)

    嘀嗒顺风车取消订单退款多久到账(嘀嗒顺风车取消行程扣钱吗)

  • win10需要激活吗(win11退回win10需要激活吗)

    win10需要激活吗(win11退回win10需要激活吗)

  • 苹果手机相机权限怎么开启(苹果手机相机权限在哪里打开)

    苹果手机相机权限怎么开启(苹果手机相机权限在哪里打开)

  • 信息黑名单在哪里找到(信息黑名单在哪里找到华为)

    信息黑名单在哪里找到(信息黑名单在哪里找到华为)

  • 苹果手机开视频怎么美颜(苹果手机开视频手机发烫)

    苹果手机开视频怎么美颜(苹果手机开视频手机发烫)

  • JavaScript -- Map对象及常用方法介绍(js map())

    JavaScript -- Map对象及常用方法介绍(js map())

  • 本期实际抵减税额合计0.00不等于
  • 国税地税合并是成功的还是失败的
  • 通过固定资产科目核算
  • 自然人独资是小规模纳税人吗
  • 行政单位总账科目
  • 信息服务费可以计入办公费吗
  • 货物运输代理服务
  • 2019小微企业10万免税需要如何办理
  • 小规模纳税人普通发票可以抵税吗
  • 现金折扣退回会计分录
  • 应付账款以前年度挂错
  • 筹建期结转损益吗
  • 盘亏存货需要进项税额转出吗
  • 别人送我免费赠品
  • 对公网银支付方式可以选哪些
  • 购买车间用的材料怎么做分录
  • 农产品收购发票上的买价含税吗
  • 预缴的附加税还可以扣减吗
  • 怎么查询发票是否已认证
  • 房产代理公司收客户钱违法
  • 付工程款现金怎么做凭证?
  • 批发零售的成本核算
  • 1697509099
  • 非营利组织企业所得税政策
  • 查账征收改为核定征收需要什么资料
  • 苹果15promax参数
  • 泡脚有什么好处和作用
  • 其他债权投资的交易费用计入什么科目
  • window10切换win7
  • 处置子公司属于调整事项吗
  • 工程结算
  • 跨年度发票的发票要报销应该怎么办
  • uniapp示例
  • 琼斯的大海怪
  • 进项税额转出是好事还是坏事
  • 企业研发费用会计处理英文文献
  • 资产负债表的编制原理
  • 企业收到工程款会计分录
  • 存货跌价准备的结转会计分录
  • php cms
  • 债权债务转让会计分录
  • 未达起征点附加税还需要扣税嘛
  • ado连接access数据库
  • 进出车间管理规定适用
  • 发行股份的原则
  • 增值税发票系统客服电话
  • 出口退税一般风险商品
  • 发票入账是什么意思
  • 电商平台经销商
  • 车保险里面的车船税
  • 软件企业技术开发增值税税率
  • 建筑企业合理避税
  • 发票丢了能做账吗
  • 进项税和销项税抵扣的会计分录
  • 应付账款和预收账款是负债吗
  • win7激活怎么关闭
  • windows 9x
  • Linux系统忘记root密码
  • 操作系统运行慢怎么解决
  • win8/10功能
  • win10系统如何更改盘符
  • 凭据管理器 win10
  • 红石cpu教程
  • Android的AsyncTask官方API谷歌翻译版
  • win7系统安装环境
  • 疯狂冰淇淋罗德
  • 注册表cmd
  • jquery插件库怎么导入
  • js实现弹窗
  • javascript入门教程
  • 表单元素的基本语法
  • centos安装完成后桌面没有图标
  • dom和javascript的关系
  • js实现功能
  • 守护进程和普通进程
  • JavaScript+html5 canvas绘制渐变区域完整实例
  • javascript文档对象
  • 挂车买保险是怎么买的
  • 税务局 章
  • 纳税申报过了申报期未申报怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设