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

  • 个人独资企业是否享受六税两费政策
  • 环保税征税
  • 金税三期系统的作用
  • 什么是税收收入效应
  • 核定征收的计算方法有哪些
  • 银行会计核算方法的特点
  • 营业执照备案需要什么资料
  • 足浴按摩开票明细一栏写什么
  • 代订机票款发票可以作为机票报销差旅吗
  • 运费发票是含税还是不含税
  • 小规模纳税人可以开9%专票吗
  • 企业职工福利费扣除标准
  • 外贸企业免征增值税
  • 工商年度报表怎么打印出来
  • 以公司名义投资好还是以个人名义投资好
  • 出口退税免退税
  • 坏账准备属于哪个会计科
  • 如何禁用开始目录的app自动推荐
  • 贷款利息 发票
  • 微信聊天记录备份和恢复
  • mac 如何u盘启动
  • 转让股权怎么做会计分录
  • uview2.0封装http请求实战以及常见请求传参实录
  • jetson b01 a02
  • 接受捐赠和对外捐赠分录
  • 结构体基本知识
  • vue2和vue3的区别大么
  • 飞机票抵扣进项税含民航发展基金吗
  • 应收账款坏账准备计算表
  • 物价变动的影响因素
  • 织梦系统如何更换网站内容
  • mysql显示数据库语句
  • 生产企业出口货物必须以什么为计税依据计算免抵退税额
  • 应付账款账户的结构与什么账户相似
  • sql server 2008中的权限分为三类
  • 关于sqlserver2000中的sql账号,角色
  • 代开发票流程该是什么?
  • 融资租赁租金计算工具使用的主要过程
  • 资产负债表中的固定资产怎么算
  • 小规模纳税人附加税减免政策2023
  • 房屋开发企业
  • 员工报销医药费怎么做会计分录
  • 跨月报销的算当月还是上个月的
  • 高速公路过路费可以抵扣进项税吗
  • 融资租赁固定资产不属于筹资活动
  • 一般纳税人税种核定表
  • 车船税税金及附加
  • 短期借款按月计提的分录
  • 未分配利润是负数怎么消化掉
  • 一般纳税人销售旧货可以开专票吗
  • 为员工购买意外保险
  • 印花税申报流程视频
  • 什么差旅费
  • 发票超过定额了怎么处理
  • 待认证进项税额和待抵扣进项税额的区别
  • 刚成立的公司没有五险一金
  • 餐饮食材成本高怎么形容
  • 会计的凭证怎么做账
  • 10种Java开发者编写SQL语句时常见错误
  • window系统怎么更新版本
  • 微软宣布9款游戏退出XGP订阅
  • xp系统开机一直在启动界面
  • macbook安装ghost win10
  • windows蓝屏代码大全及解决方案
  • winio在win7下使用
  • mac如何关闭开机密码
  • 进程 电脑
  • 免安装版怎么用
  • cocos2dx4.0教程
  • js入门基础
  • Ext中下拉列表ComboBox组件store数据格式用法介绍
  • css怎么加图标
  • android adbd
  • webuploader.create
  • js原型作用
  • javascript要怎么学
  • jquery多级菜单
  • nodemcu连接阿里云
  • 个人总结的几个方面
  • 煤炭资源税税率选煤税率多少黑龙江
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设