React 中的状态自动保存(KeepAlive)-程序员宅基地

技术标签: ViewUI  javascript  

开发中,时常回碰到需要做状态保存的场景,常见如详情页回退到列表页,希望保持滚动位置与已请求的数据

在 Vue 中,我们可以非常便捷地通过 keep-alive 标签实现状态的保存,而在 React 中并没有这个功能

本文将分别基于 react-router 或基于 React 渲染原理,探讨两种 React 中 KeepAlive 的实现方式

图文无关图文无关

什么是状态保存?

假设有下述场景:

移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击查看其详情,进入详情页,从详情页退回列表页时,需要停留在离开列表页时的浏览位置上

类似的数据或场景还有已填写但未提交的表单管理系统中可切换和可关闭的功能标签等,这类数据随着用户交互逐渐变化或增长,这里理解为状态,在交互过程中,因为某些原因需要临时离开交互场景,则需要对状态进行保存

React 中,我们通常会使用路由去管理不同的页面,而在切换页面时,路由将会卸载掉未匹配的页面组件,所以上述列表页例子中,当用户从详情页退回列表页时,会回到列表页顶部,因为列表页组件被路由卸载后重建了,状态被丢失

如何实现 React 中的状态保存

Vue 中,我们可以非常便捷地通过 <keep-alive> 标签实现状态的保存,该标签会缓存不活动的组件实例,而不是销毁它们

而在 React 中并没有这个功能,曾经有人在官方提过功能 issues ,但官方认为这个功能容易造成内存泄露,表示暂时不考虑支持,所以我们需要自己想办法了

常见的解决方式:手动保存状态

手动保存状态ÿ

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/valada/article/details/101484212

智能推荐

2020-11-30leetcode 贪心_0xc20a69ad22df7cdc34f792c7a7f7129490e6b07f-程序员宅基地

文章浏览阅读261次。leetcode 55 跳跃游戏思路一:这道题最容易想到的方法就是递归(dfs),但是很不幸的是,使用递归方法,即使使用了空间换时间,优化了花费的时间,依然会超时。。。思路二:贪心算法官方给出的题解也是贪心算法。。之前贪心算法训练得比较少,一时没有想到,需要仔细琢磨。。针对数组中的每个索引,在保证当前索引可达的前提下,寻找当前索引可达的最大范围。。..._0xc20a69ad22df7cdc34f792c7a7f7129490e6b07f

毕业设计 单片机自动追踪灭火系统 - arduino stm32 物联网 嵌入式_基于stm32灭火小车原理图-程序员宅基地

文章浏览阅读1k次。 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往往达不到毕业答辩的要求,这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设,学长分享优质毕业设计项目,今天要分享的是基于单片机的自动追踪灭火系统学长这里给一个题目综合评分(每项满分5分)难度系数:4分工作量:4分创新点:3分基于arduino单片机的灭火装置,当传感器检测到火焰的时候,会自动控制舵机转向灭火。_基于stm32灭火小车原理图

antdesign Pro of vue 自定义菜单栏图标,导航菜单图标引入阿里巴巴矢量库IconFont自定义的图标_ant design pro react 侧边导航使用本地图标-程序员宅基地

文章浏览阅读1.5k次。antdesign Pro of vue自定义菜单突变,引入icontfont_ant design pro react 侧边导航使用本地图标

python基于小程序的物流管理系统flask-django-php-nodejs-程序员宅基地

文章浏览阅读674次,点赞8次,收藏19次。随着计算机技术和网络技术的不断发展,线上管理成为一种新兴的管理方式。既带动了物流等相关产业链的发展,又加剧了行业间的竞争。在这种情况之下,更为高质量的物流服务质量能够获得大批人员群体的青睐,为自身进一步开拓市场奠定良好的基础。

【聚类算法】篇二之KMeans聚类算法及其优化KMeans++,elkan K-Means,Mini Batch K-Means,K中心点算法_kmeans算法参数优化-程序员宅基地

文章浏览阅读3.9k次,点赞5次,收藏24次。篇二之KMeans聚类算法及其优化一、KMeans算法二、优化初始k个中心的KMeans++算法三、优化距离计算量的elkan K-Means算法四、Mini Batch K-Means参考KMeans算法是原型聚类的一种,原型聚类是指基于一组原型进行初始化,然后再利用迭代的方式对原型进行更新求解一、KMeans算法K均值算法基于最小化平方误差的原则,所有簇的平方误差和如下:μi是簇Ci..._kmeans算法参数优化

机器人学基础(2)-微分运动和速度-雅可比矩阵计算、雅可比矩阵求逆、计算关节运动速度_机器人雅可比矩阵选择题-程序员宅基地

文章浏览阅读8.9k次,点赞14次,收藏80次。通过学习本章内容,利用公式,已知机器人关节速度,利用雅可比矩阵可以得到机器人手的运动速度;已知机器人手的运动速度,求雅可比矩阵的逆可以得到机器人各关节的速度。同时也学习了不使用雅可比矩阵求关节速度的方法,利用机器人的逆微分运动方程,就可以确定每个关节速度为多少才能产生所期望的机器人手速度。知道了机器人逆运动方程和逆运动微分方程,即知道机器人在空间中的位置和速度。第一章运动学的正运动方程和逆运动方程是为了求得机器人的位置;本章节的微分运动是在已知位置的基础上求得机器人的运动速度和各个关节速度。_机器人雅可比矩阵选择题

随便推点

PintOS, kernel panic with -v option bochs on ubuntu_run didn't start up properly: no "pintos booting" -程序员宅基地

文章浏览阅读2.6k次。Run didn't start up properly: no "pintos booting" message pintos出错解决方案when i do "pintos -- run alarm-multiple" in .../build/ everything seems fine.but when i do "make ch_run didn't start up properly: no "pintos booting" message

实测:GPT-3.5、GPT-4、Newbing和文心一言,你该怎么选?_gpt 3.5 4 翻译能力-程序员宅基地

文章浏览阅读3.9k次,点赞3次,收藏3次。GPT-4的回答在理解程度、概括能力、语言表达和逻辑结构方面都表现较好,能够较为全面地反映原文的内容和作者的心境。4)文心一言的回答则更深入地分析了原文的意义,表达更具备思想性,用词也非常精准,同时也注重语言的音韵和节奏的变化,更符合文学审美。3)Newbing的回答语义理解相对较为深入,系统地解释了每个时间段的含义,并在简洁的词汇和句子中把它们纳入一个完整的故事中。2)GPT-3.5的回答与GPT-4的回答类似,但在表达方面更为流畅,用词更加优美,更符合文学的风格,有一定的深度。_gpt 3.5 4 翻译能力

工作流-Activiti 开发_java activiti工作流 任务不存在-程序员宅基地

文章浏览阅读1.2k次。工作流-Activiti 开发 工作流概述工作流(workflow)就是工作流程的计算模型,我们常见的请假电子流就是一个简单的工作流。JavaWeb 工作流开发准备使用Eclipse开发,需要安排工作流插件 离线安装安装步骤:Eclipse插件安装 new-&gt;other 检查安装是否成功 简单开发流程1.新建一个..._java activiti工作流 任务不存在

Android基础入门_activity_main.xml-程序员宅基地

文章浏览阅读1.6k次。Android Studio使用_activity_main.xml

JSF+EJB+JPA总体思路-程序员宅基地

文章浏览阅读551次。前言: JSF+EJB+JPA 其实我并没有想象中的难,只是想做好,建立在正确的地方应用,真正的困难. 良好的技术,在错误的地方做应用,这是唯一能够被垃圾. 用. 重量级企业应用能够使用这个主要的3层结构的实现,来添加很多其它的企业级应用.而这些基本上不怎么须要改动,能够说是能够独立开来维护的部分.至于耦合性,关键看怎样建立应用了,这个又和项目開始的分析和设计密切相关.目的: 建立..._jsf+ejb+jpa是什么

jsp 页面跳转传值-程序员宅基地

文章浏览阅读259次。2019独角兽企业重金招聘Python工程师标准>>> ..._jsp页面跳转传值

推荐文章

热门文章

相关标签