react 页面缓存两种方式

最新推荐文章于 2024-05-18 10:02:44 发布
最新推荐文章于 2024-05-18 10:02:44 发布
阅读量5.8k 收藏 1
点赞数
分类专栏： react 文章标签： react web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30980795/article/details/109014689
版权

项目需要：切换组件保留前一个页面数据，即：返回上一页的时候，上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。1.react路由处理方式用react-router-cache-route插件替代react-router-dom插件，2.全局状态管理；

1. 路由实现方式

参考这篇文章https://www.jianshu.com/p/a9e16b9eb210

2. 全局状态实现方式

这方法就很简单了，只需要在根组件注入一个全局状态即可在网页没关闭情况下，保留页面数据。

weixin_30980795
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router-dom v6.0新特性及路由守卫
Bejpse的博客
02-21 2854
一、概述 v6相比v5,做了很多的优化。包括书写上更加的便捷，更加体现组件化思想。以往在处理路由嵌套和鉴权方面，v5的写法都靠各自开发人员去实现相对比较参差不齐。一下针对v6的配置做简单的介绍。 二、useRoutes v6中路由的设置采用hook的方式，有点像vue的router的实例化。 import {useRoutes} from "react-router-dom"; import { Suspense, lazy } from 'react' const routes = [ { p
react缓存页面
weixin_39946536的博客
11-07 2377
写react中时总会跟vue对比，vue中有keep-alive做缓存页面，也有相应的api激活（activated）和停用（deactivated）。 react中我们用react-router-dom做路由时怎么缓存页面呢？ 我想的是在Route中一个exact属性，当exact为false时下 如果进入B页面时A页面也会显示，只要我页面在B页面时隐藏A页面，在返回A页面时在显示就可以了 ...
利用React-keepalive-router实现组件高效缓存
最新发布
gitblog_00045的博客
05-18 402
利用React-keepalive-router实现组件高效缓存 项目地址:https://gitcode.com/GoodLuckAlien/react-keepalive-router 1、项目介绍 react-keepalive-router 是一款专为React 16.8+以及react-router 4+设计的高效缓存组件库。灵感来源于Vue的keep-alive特性，它允许你在切换路由...
react利用react-activation实现子路由缓存
QingHan_wow的博客
10-27 1521
1.下载依赖 yarn add react-activation 2.父路由里的代码 import React, { FunctionComponent,cloneElement } from 'react' import Styles from './layout.less' import { IRouteComponentProps } from 'umi' import { Switch, Route } from 'react-router'; import KeepAlive, { AliveS
react18【系列实用教程】memo —— 缓存组件 （2024最新版）
朝阳39的博客
05-15 485
将需要缓存的组件作为 memo 函数的参数传入，并将 memo 函数的返回值对外导出即可。
react-router-dom v6 通过outlet实现keepAlive 功能
m0_67403240的博客
03-11 2707
keepAlive代码： import React, { useRef, useEffect, useReducer, useMemo, memo } from 'react' import { TransitionGroup, CSSTransition } from 'react-transition-group' import { useLocation } from 'react-router-dom' const KeepAlive = props => { const { in.
react-router-dom v6版本实现Tabs路由缓存切换
那个西瓜有点甜
10-18 2235
之前不太喜欢在项目中去引用MVVM框架，有的太大，有的小但不是很成熟，怕遇特别的业务需求无法解决，干脆自己写了一个。几有几百行代码。 可自己去扩展绑定指令，已支持的指令有，事件，属性，样式，值，模板，
react实现组件状态缓存
范德萨的博客
02-01 2040
在移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上
React——组件缓存 react-activation
qq812457115的博客
08-26 1967
Boolean (true-卸载时缓存 false-卸载时不缓存)Function (返回值为上述。参数表示是否需要在卸载时缓存。的所有缓存内容，包括。
React搭建文档.docx
03-08
另一种方式是使用React的脚手架工具Create React App来创建项目，这更适合实际开发和部署。在开始之前，需要确保你的计算机已安装Node.js。你可以访问Node.js官网下载并安装。安装完成后，通过运行`npm -v`检查Node....
react-React单页Vue多页商城应用前端
08-15
在IT行业中，React和Vue是两个非常流行的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）和多页应用程序（MPA）。本项目聚焦于使用React构建一个商城应用的前端部分，同时提及了ReactLocalBabel插件，它...
react 实现页面代码分割、按需加载的方法
08-27
本文将详细介绍如何在React中实现这两种优化方法。 首先，代码分割允许我们将应用程序拆分为多个独立的块，每个块仅在需要时才加载。这样，初始加载时间会减少，因为用户不必等待整个应用程序的所有代码被下载。在...
React Router 的基本应用-案例
08-08
总结来说，React Router通过`BrowserRouter`, `Route`, 和 `Link`等组件，让React应用能够根据URL动态呈现不同的页面，提供了一种优雅的SPA导航解决方案。理解并熟练掌握这些基本概念，将对你的React开发能力提升...
react-admin_client.rar
02-27
6. **错误处理和日志记录**：在项目中，我们通常会遇到API错误或用户交互错误，React Admin提供了一种机制来处理这些错误，并可集成日志服务记录关键事件。 7. **状态管理**：虽然React Admin自带了一些状态管理，...
react-router-dom v6.5.0实现路由守卫RouterBeforeEach及缓存
Javon_huang的博客
12-26 3294
最近留意下react-router-dom有更新到6.6.1的版本，在这个版本增加了不少的功能。研究了下，可以利用其提供的API实现一个类似Vue的路由守卫，从而简便达到路由鉴权的业务场景。这里我是使用npm的包，是react-router-dom v6.5.0，但是基本新增的功能都有。官方提供的路由跳转是使用useNavigate hook的，这里我们要实现路由守卫，那么我需要在路由跳转前做逻辑的判断，所以我自定义了一个useUtilsNavigate hook用于跳转前的判断。
React18实现keepalive效果 react-router-dom@6 outlet 路由缓存 页面缓存
WCvison的博客
11-13 3846
React 18+实现Vue里面的keep-alive效果 react-router-dom@6 outlet 路由组件 路由页面缓存
使用react-activation实现路由跳转时页面缓存保留页面数据，组件不被卸载
weixin_43801836的博客
03-21 7364
背景，在 React 中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件。为了实现切换路由后，再返回刚刚的页面，数据还是原始状态，一种方法就是使用react-activation插件进行页面的缓存 具体的详情讲解，可看这位作者的react-activation 选用上述缓存方式的自动控制缓存， 步骤 业务代码中，在不会被销毁的位置放置 外层，一般为应用入口处。在react 项目中引入插件，import {AliveScope} from “react..
react如何做页面缓存？ 类似vue中的keep-alive
讨口子
07-17 2590
react-router-cache-route 解决react页面缓存（返回列表不更新） react-router-dom本身是不支持的，需要引入react-router-cache-route npm install --save react-router-cache-route import React from 'react'; import { BrowserRouter as Router,Route} from 'react-router-dom'; import CacheRoute,{ C
react 页面缓存
11-21
React页面缓存可以通过使用`react-keep-alive`库来实现。该库提供了一个`KeepAlive`组件，可以将需要缓存的组件包裹在其中，从而实现缓存的效果。 以下是一个使用`react-keep-alive`实现页面缓存的例子： 首先，安装`react-keep-alive`库： ```shell npm install react-keep-alive --save ``` 然后，在需要缓存的组件外层包裹`KeepAlive`组件： ```jsx import React from 'react'; import { KeepAlive } from 'react-keep-alive'; function CachedComponent() { return ( <div> {/* 这里是需要缓存的组件 */} </div> ); } function App() { return ( <div> <h1>My App</h1> <KeepAlive> <CachedComponent /> </KeepAlive> </div> ); } export default App; ``` 这样，`CachedComponent`组件就会被缓存起来，当组件被卸载时，其状态和数据都会被保留下来，下次再次渲染时可以直接使用缓存的数据。 如果需要手动清除缓存，可以使用`useCacheContext` hook提供的`clear`方法： ```jsx import React from 'react'; import { useCacheContext } from 'react-keep-alive'; function ClearButton() { const { clear } = useCacheContext(); function handleClick() { clear('CachedComponent'); } return ( <button onClick={handleClick}>Clear Cache</button> ); } export default ClearButton; ``` 这里的`clear`方法接受一个组件名称作为参数，可以清除该组件的缓存数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值