关于React如何实现keepAlive的探索

最新推荐文章于 2025-04-14 16:10:25 发布
最新推荐文章于 2025-04-14 16:10:25 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41279326/article/details/118713293
版权
本文探讨了在React项目中如何实现在列表页跳转到详情页后再返回列表页时保持原来位置。通常Vue有内置的keep-alive功能，但React并未提供。作者提出了两种方法：一是利用state或session存储列表页状态；二是使用umijs的keepAlive插件。社区方案中，umijs3.0的keepAlive特性提供了页面缓存功能，使得在列表和详情页之间切换时能保持状态。总结建议开发者在遇到问题时多参考社区资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

背景

探索

‘笨方法’

社区方案  

背景

      做了挺多中后台的项目，碰到过最多的是列表跳转详情，然后再从详情跳转到列表。这时候，就有个需求，从详情页跳转回列表需要显示原来的位置。

      通常情况下，如果不做任何操作，使用路由跳转回列表页，就会重新请求数据，显示的是第1页的数据，这中体验感是不好的。如果是使用Vue做项目的话，直接使用官方提供的keep-alive实现就行，非常方便。但react官方并没有提供这种功能。

     朴实的方法有没有呢，当然有，正所谓，只要思想不滑坡，办法总比困难多。

探索

‘笨方法’

       采用state存储当前列表页的分页对象以及搜索条件，跳转详情的时候一并传给详情页，然后跳转回详情再传回给列表页，也可以用session存储，不过你需要及时清理掉session，在你跳转到列表页以及详情页之外的页面时，是会比较麻烦，但是为了使软件体验感好，也是值得。

社区方案  

     使用umijs3.0提供的keepAlive试用版本，正好公司用的框架是umi，正好拿来用。使用方法很简单，只要route中配置属性keepAlive，就会被缓存。

 在不需要的时候，可以手动调用方法取消,下例的 /list 为上面设置了 keepAlive 的路由 path

总结，遇到解决不了的问题，不妨上社区看看，总能发现新大陆，加油！！！

如何在React中实现keep-alive？
petertanjinjie的博客
06-04 7234
写在开头不推荐你使用本文这个库，这个库会造成数据驱动断层（即你缓存后，切换回来，确实可以看到跟之前一样的dom，但是数据驱动此时失效了）,下周我会写另外一个可以不断层的库解析❝现代框架的...
RN - iOS端后台挂起后30s重启问题处理过程与心得
iOSTianNan的博客
05-25 2370
rct.timging.gb.task报错 RN 框架 iOS 挂起后重启、杀死、闪退
react-keep-alive:保持组件状态并避免重复渲染的组件
04-01
React保持活力 保持组件状态并避免重复渲染的组件。 English | :sparkles: 特征 不基于React Router，因此您可以在需要缓存的任何地方使用它。 您可以轻松地包装组件以保持它们的生命。 因为它不受display: none | block控制，所以display: none | block display: none | block ，您可以使用动画。 您将能够使用最新的React Hooks。 能够手动控制您的组件是否需要保持活动状态。 :package: 安装 React Keep Alive需要React 16.3或更高版本，但如果使用React Hooks，则必须为React 16.8或更高版本。 要将React Keep Alive与React应用程序一起使用： npm install --save react-keep-alive :hammer: 用法 React Kee
React KeepAlive 组件使用教程
最新发布
gitblog_00168的博客
04-14 501
React KeepAlive 组件使用教程 keepalive-for-react React KeepAlive is a component that can cache the state of the component and reuse it when needed. ...
react 实现页面状态缓存（keep-alive）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-22 1万+
因为 react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个 页面我滑倒了中间，然后跳转到 详情页然后 返回，之前的页面刷新了，回到顶部了肯定不行（搜索条件之类的消失了，滚动条回到顶部了）！比如：pc端项目后台管理项目里点击时 打开一个页签，页签切换，状态页会丢失。每次切换页签都重新请求了接口。
React实现keepAlive
LOVEjourneyQAQ的博客
06-26 1956
keep-alive是vue中的内置组件，使用keep-alive包裹组件可以在该组件的切换过程中将页面的状态缓存在内存中，界面切换后被包裹的组件实例不会被销毁，防止界面重复渲染DOM，并且可以防止在页面切换过程中组件的数据丢失。包裹在需要缓存的组件外侧，通过Provider把状态和方法传递给子组件，如果判断出reactElement已经传过来了，但是对应的nodes数组还是为null的话就触发相应的reducer把该nodes重新赋值。即：切换路由时缓存之前的组件，保留之前输入的值不被清空。
react中 keep-alive
大灰狼的小绵羊哥哥的博客
09-01 7264
react中如何实现 keep-alive 效果
react vite
01-16
### 关于 React 与 Vite 的集成及最佳实践 #### 创建基于 Vite 的 React 应用程序 Vite 是一种新型前端构建工具，具有极快的冷启动速度和闪电般的热更新能力。为了创建一个新的 React 项目并利用 Vite 提供的优势...
探索 AnythingLLM：借助开源 AI 打造私有化智能知识库
ServiceMesher
12-19 2808
探索如何使用开源项目 AnythingLLM 构建私有化智能知识库。通过 RAG 技术，将文档转化为可检索向量，结合大语言模型实现高效问答，适用于企业与个人开发者。阅读原文请转到：https://jimmysong.io/blog/building-private-ai-knowledge-base-anythingllm/随着大语言模型（LLM）的快速发展，将企业内部知识库与 AI 工具结合成为...
实时服务架构设计：WebSocket-Client库的分布式应用探索
[实时服务架构设计：WebSocket-Client库的分布式应用探索](https://dz2cdn1.dzone.com/storage/temp/1862356-load-balancing-of-websocket-connections.png) # 1. 实时服务架构设计概述 在当今的互联网应用中，实时...
基于微前端qiankun的多页签缓存方案实践
JavaMonsterr的博客
07-31 1850
相较于社区上大部分通过方案一进行实现，本文提供了另一种实现多页签缓存的一种思路，主要是对子应用缓存处理上有些许的不同，大致的思路及通信的方式都是互通的。另外本文对qiankun框架的使用没有做太多的发散总结，官网和Github上已经有很多相关问题的总结和踩坑经验可供参考。httpshttpshttpshttpshttpshttps。...
umi-plugin-keep-alive:用于基于React激活的umijs
05-13
umi-plugin-keep-alive 中文说明 | 此 <KeepAlive> 功能基于 在线示例 umi 多 tabs 示例： 使用方法 安装 npm install umi-plugin-keep-alive --save # or yarn add umi-plugin-keep-alive 从 umi 中导出 KeepAlive，包裹在需要被缓存的组件上 import { useState } from 'react' import { KeepAlive } from 'umi' function Counter() { const [count, setCount] = useState(0) return ( <div> <p>count: {count}</p> <button onClick={() => setCount(c
React中怎么实现状态自动保存（KeepAlive）？
zz130428的博客
12-11 1729
移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等，这类数据随着用户交互逐渐变化或增长，这里理解为状态，在交互过程中，因为某些原因需要临时离开交互场景，则需要对状态进行保存。
React 怎么实现 Vue 的 <keep-alive> 组件
weixin_33984032的博客
03-18 591
如果你用过 Vue，那肯定知道它有一个非常好用的组件（keep-alive）能够保持组件的状态来避免重复重渲染。 有时，我们希望在列表页面进入详情页面后，缓存列表页面的状态；当从详情页面返回列表页面时，列表页面还是和切换前一样。 这实际上挺难实现的，因为 React 中的组件一旦卸载就无法重用。在 issue #12039 中提出了两种解决方案；通过样式来控制组件的显示（display：none ...
React - keep-alive
sinat_33184880的博客
02-16 929
React 没有提供类似 Vue <keep-alive> 缓存页面不销毁的功能。在 Github 上，有用户提了相关的 issues：can React support feature like keep-alive in Vue? 但 React 的开发者认为新增“缓存页面”功能需要修改原有的代码，并且“缓存页面”容易造成内存溢出，他们并不推荐用户使用/依赖该功能，并给与了其他解...
react 中的 keep-alive
__竹子__的博客
06-25 4469
需求场景，方法对比，react-activation 的使用和源码原理
react-router 实现 keepalive
qq_40693662的博客
07-02 644
3、二次封装 useOutlet ，根据缓存的 页面 来实现自定义渲染。2、使用react 的context 来缓存当前页面的所有节点。1、传入需要缓存的页面。
React项目实现页面状态缓存（keep-alive）
看陌生的风景的博客
07-24 785
React项目实现页面状态缓存（keep-alive）
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值