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

  • 超标准能按小规模纳税人标准纳税吗?
  • 车船使用税怎么网上缴费
  • 发票低于实际支付的金额如何做账
  • 先到发票后到商品怎么入账
  • 法人可以领发票吗现在
  • 公司用的摄像头
  • 法人分红需要交个税吗
  • 个体户定期定额是什么意思
  • 小规模纳税人收入账务处理
  • 邮政能否为固定业户代开增值税普通发票
  • 单位支付给职工的一次性补助金怎么入账
  • 非货币性资产交换补价大于25%的会计处理
  • 创投资本投入资金如何做账?
  • 固定资产如何抵扣企业所得税
  • 应收账款资产减值损失转回和核销的区别
  • 其他业务收入需要结转成本吗
  • 农产品销售发票是什么?
  • 营增改后,建筑施工企业有哪些改变?
  • 小企业报表为什么勾选不到小型微利企业
  • 印花税减半征收会计分录怎么做
  • 购买小汽车增值税发票金额开错
  • 企业的不征税收入用于支出所形成
  • 货代发票税率是多少
  • 公司注销了是不是就不能用了
  • 购买原材料无法确认收入
  • 政府性基金收入来源三种
  • 建筑工程购买的家用清洁电器能勾选认证吗
  • 企业计提房产税的会计处理正确的是
  • 现金付款没收据怎么入账
  • filecopyutils.copy上传文件
  • win7旗舰版系统怎么样
  • icm是什么文件
  • php判断文件上传类型
  • 公司为员工投保意外险,意外险赔付给谁
  • 工伤补贴由谁发放
  • 最好卖的游戏机排行榜
  • 行政事业性收费目录
  • 西西弗书店主管级
  • 收外汇怎么做账报税
  • 收到债劵利息会减少吗
  • 贷款的银行卡叫什么
  • TypeError The view function did not return a valid response. The function either returned None 的解决
  • 员工旅游是什么意思
  • 超级鸽卫星
  • 异步函数执行顺序
  • openai 入门
  • 防伪税控开票
  • python rem
  • 进项税额转出都需要开具红字发票吗
  • 购入原材料要交印花税吗
  • 公司刚成立没有员工需要申报个税吗
  • 哪些合同必须签订书面合同
  • 企业商品报废如何处置
  • 计提销售费用什么意思
  • 暂估入账会计科目
  • 应付账款周转次数计算
  • 权益性无形资产包括哪些?
  • 费用报销单的摘要和报销项目怎么写
  • 新产品的研发费用扣除例题
  • 会计凭证的主要种类
  • SQL Server Alert发送告警邮件少了的原因
  • navicate创建存储过程
  • ubuntu系统无法安装中文
  • sguard是什么文件夹
  • win7旗舰版显示不全屏
  • win10电脑补丁 kb5000802
  • shell自定义命令
  • Python 操作MySQL详解及实例
  • find 批处理
  • 教学实例分析怎么写
  • jquery怎么设置宽度
  • jquery实现div左右移动
  • python迭代算法举例
  • unity at
  • string和stringbuffer创建后都可以修改
  • 甘肃省政府非税收入电子发票在哪里打印
  • 税务局副科长工资
  • 如何下载建设工程消防验收备案表格下载
  • 讨论如何做好寺庙管理服务工作
  • 债权收购协议书
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设