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

  • 增值税小规模纳税人申报表填表说明
  • 材料暂估可以跨年度吗
  • 非企业员工可以报销差旅费吗
  • 增值税发票综合服务平台错误代码35
  • 财务负责人如何解绑
  • 固定资产本期发生额怎么算
  • 票据承兑和贴现市场上最主要的交易对象是( )
  • 胶水开票开什么类目
  • 事业单位的会计制度是什么
  • 房产税直接减免政策
  • 企业所得税季度预缴可以弥补以前年度亏损吗
  • 房产税逾期未申报罚款多少
  • 进口代理费取费标准
  • 金税设备维护费账务处理
  • 商场销售化妆品应当缴纳增值税和消费税对吗
  • 工程交税必须在工程地点交吗
  • 没有发票怎么报销入账
  • 银行开户许可证什么时候开始取消的
  • 增值税在免税范围内,附加税怎么做
  • 小规模增值税专票税率
  • 融资租赁与经营租赁的相同点
  • 环境保护税交给谁
  • 个人所得税人员添加后如何操作
  • 出口茶叶需要什么资质
  • 企业为员工缴纳社保可以抵税吗
  • 何为民办非企业
  • linux环境什么意思
  • 企业职工工伤赔偿标准税前扣除
  • 哪些资产类科目增加记贷方
  • 判断企业存货过多的判断方法
  • 当月不生产,生产成本怎么处理
  • 权限控制的原则是什么
  • php autoloader
  • 其他应付款不需要支付的怎么处理,预算会计
  • 科尼西卡神庙在哪里
  • 礼的部首是什么部
  • element动态变化表格列
  • 制造业预提短期利润
  • re.findall()用法
  • thinkphp框架怎么用
  • vue环境搭建及配置简书
  • vue3setup语法糖如何定义realtive数据
  • Python图像识别实战(四):搭建卷积神经网络进行图像二分类(附源码和实现效果)
  • 终止cat命令
  • 关于我和鬼变成家人的那件事
  • 差旅费津贴与差旅费补助
  • 织梦如何做提取卡密
  • 网银转账往来款怎么做账
  • 如何在税控盘上申领发票
  • 接受银行承兑汇票需要开通吗
  • 小规模纳税人减免增值税会计处理
  • 月未转出未交增值税
  • 食堂采购原材料怎么在赣溯源备案
  • 子公司计提的盈余公积合并抵消
  • 关于发票冲账应该怎么写
  • 以前年度损益调整账务处理分录
  • 公司人事怎么办公积金提取流程?
  • 企业所得税预缴2‰
  • linux的安装
  • wdcp面板
  • win8.1还原系统
  • ie8 开发者工具
  • 微软宣布将GPT接入操作系统
  • office技术预览版和增强版
  • linux datetime命令
  • centos6.7防火墙
  • centos dvd安装
  • ES6 javascript中class静态方法、属性与实例属性用法示例
  • css中列表样式
  • python 入门指南
  • unity f
  • js复制数组的方法
  • python3利用smtplib通过qq邮箱发送邮件方法示例
  • android网络访问异常提示有哪些
  • javascript常用语句
  • 国家税务局开票软件下载
  • 四川灵活就业医保每月返多少钱
  • 个人意外所得税税率
  • 环保税征税范围44项
  • 附加税申报表怎么做
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设