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

  • 个人车辆无偿给公司使用
  • 城镇土地使用税纳税义务发生时间
  • 支付电费未开具发票
  • 股票股利的资金来源
  • 用现金支付需要附哪些单据
  • 经常做无票收入没有通过公户收款会有问题吗
  • 房租收到专票账务处理
  • 房地产企业净利润为负的原因
  • 特定资产收益权融资业务
  • 股权转让如何避免印花税
  • 财付通-备付金账户
  • 用于研发的设备会计分录
  • 纳税调整税收金额
  • 逾期增值税扣税凭证抵扣问题
  • 价内税包括
  • 技术开发费税收优惠政策
  • 学校应该缴纳的税
  • 发票上折扣怎么记账
  • 金融企业的代理贷款什么意思
  • 当月费用下月付款
  • 增值税发票已经认证可以撤销吗?
  • 企业社保缴费工资
  • window最新漏洞
  • 预付加油充值卡可以报销吗
  • 电脑怎样进入cmos设置
  • 公司股东转账进公司账户,会计分录
  • php array数组
  • 公司搞活动买的车能买吗
  • php wechat
  • ruoyi框架快速入门
  • 缴纳社保公司需要税务登记吗
  • 遮天传官网
  • 速动资产是指
  • 转让旧机器的会计分录
  • 外贸企业代理出口退税给谁
  • 利润表年报本期金额填什么
  • 每股收益率计算公式举例
  • PostgreSQL 安装和简单使用第1/2页
  • sql条件查询语句怎么写
  • 堤围防护费如何计算
  • 管理费用漏记了跨年调整
  • 餐厅吃饭不小心把餐具打破需要赔吗?
  • 其他收益和其他综合收益属于什么科目
  • 持有至到期投资减值准备
  • 投资性房地产转为非投资性房地产
  • 长期股权投资在现金流量表哪里体现
  • 预收账款如何做账务处理
  • 装订凭证需要注意事项
  • 本年利润要结转吗为什么
  • 待抵扣进项税额和待认证进项税额的区别
  • 滴滴普票可以计算抵扣吗
  • 案例分析应收账款管理存在的问题
  • 反记账是什么
  • mysql分区分表原理
  • MSsql每天自动备份数据库并每天自动清除log的脚本
  • Windows Server 2003关闭启动后的Ctrl+Alt+Del选项和关机时的时间跟踪程序方法
  • 如何查看ubuntu系统的版本
  • windows8如何安装
  • 丢失msvcp71.dll
  • ubuntu tc
  • ubuntu sudo apt
  • centos安装虚拟机教程
  • win7防火墙怎么彻底关闭
  • win10怎么将桌面图标变小
  • win7系统怎么锁定屏幕
  • Linux安装配置jdk
  • 在unity中单例的主要作用
  • 基于nodejs的项目
  • windows配额
  • python中类怎么用
  • unity3d基本操作
  • 电子原理图实例讲解
  • 预拍摄功能相机
  • 大连税务登记app
  • 河南灵活就业缴费截止时间
  • 北京 国税
  • 甘肃税务局电子税务局客服电话
  • 税务局组织收入存在的问题
  • 税务总局转变税收征管方式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设