如何实现 React 中的状态自动保存?
作者:陈俊宇
链接:https://github.com/CJY0208(点击尾部阅读原文前往)
什么是状态保存?
假设有下述场景:
移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击查看其详情,进入详情页,从详情页退回列表页时,需要停留在离开列表页时的浏览位置上
类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等,这类数据随着用户交互逐渐变化或增长,这里理解为状态,在交互过程中,因为某些原因需要临时离开交互场景,则需要对状态进行保存
在 React
中,我们通常会使用路由去管理不同的页面,而在切换页面时,路由将会卸载掉未匹配的页面组件,所以上述列表页例子中,当用户从详情页退回列表页时,会回到列表页顶部,因为列表页组件被路由卸载后重建了,状态被丢失
如何实现 React 中的状态保存
在 Vue
中,我们可以非常便捷地通过 <keep-alive>
[1] 标签实现状态的保存,该标签会缓存不活动的组件实例,而不是销毁它们
而在 React
中并没有这个功能,曾经有人在官方提过功能 issues[2] ,但官方认为这个功能容易造成内存泄露,表示暂时不考虑支持,所以我们需要自己想办法了
常见的解决方式:手动保存状态
手动保存状态,是比较常见的解决方式,可以配合 React
组件的 componentWillUnmount
生命周期通过 redux
之类的状态管理层对数据进行保存,通过 componentDidMount
周期进行数据恢复
在需要保存的状态较少时,这种方式可以比较快地实现我们所需功能,但在数据量大或者情况多变时,手动保存状态就会变成一件麻烦事了
作为程序员,当然是尽可能懒啦,为了不需要每次都关心如何对数据进行保存恢复,我们需要研究如何自动保存状态
通过路由实现自动状态保存(通常使用 react-router)
既然 React 中状态的丢失是由于路由切换时卸载了组件引起的,那可以尝试从路由机制上去入手,改变路由对组件的渲染行为
我们有以下的方式去实现这个功能
重写
<Route>
组件,可参考 react-live-route[4]重写可以实现我们想要的功能,但成本也比较高,需要注意对原始
<Route>
功能的保存,以及多个react-router
版本的兼容替换路由库为 react-keeper[5]
完全替换掉路由方案是一个风险较大的事情,需要较为慎重地考虑3.
基于
<Route>
组件现有行为做拓展,可参考 react-router-cache-route[6]在阅读了
<Route>
的源码后发现,如果使用component
或者render
属性,都无法避免路由在不匹配时被卸载掉的命运但将
children
属性当作方法来使用,我们就有手动控制渲染的行为的可能,关键代码在此处 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L41-L72
// 节选自 Route 组件中的 render 函数
if (typeof children === "function") {children = children(props); // children 是函数时,将对 children 进行调用得到真实的渲染结果if (children === undefined) {...children = null;}}return (
<RouterContext.Provider value={props}>{children && !isEmptyChildren(children) // children 存在时,将使用 children 进行渲染? children: props.match? component? React.createElement(component, props): render? render(props): null // 使用 render 属性无法阻止组件的卸载: null // 使用 component 属性无法阻止组件的卸载}
</RouterContext.Provider>);
基于上述源码探究,我们可以对 <Route>
进行拓展,将 <Route>
的不匹配行为由卸载调整为隐藏,如下
<Route exact path="/list">{props => (<div style={props.match ? null : { display: 'none' }}><List {...props} /></div>)}</Route>
上述是最简的调整方式,实际情况中也需要考虑隐藏状态下 match
为 null
导致组件报错的问题,且由于不再是组件卸载,所以和 TransitionGroup
配合得不好,导致转场动画难以实现
使用 react-router-cache-route[7],得到的效果大致如下图,
上述探究了通过路由入手实现自动状态保存的可能,以及现有的实现,但终究不是真实的、纯粹的 KeepAlive
功能,接下来我们尝试探究真实 KeepAlive
功能的实现
模拟真实的 功能
以下是期望的使用方式
function App() {
const [show, setShow] = useState(true)return (
<div>
<button onClick={() => setShow(show => !show)}>Toggle</button>{show && (
<KeepAlive>
<Test />
</KeepAlive>)}
</div>)
}
实现原理说起来较为简单,由于 React
会卸载掉处于固有组件层级内的组件,所以我们需要将 <KeepAlive>
中的组件,也就是其 children
属性抽取出来,渲染到一个不会被卸载的组件内,就可以实现此功能
以下是 react-activation[8] 的实现效果
在线示例[9]
实际实现过程中,遇到了许多问题,都是由于打破了原有 React 层级关系引起的,例如
渲染延迟
Provider 上下文功能失效
Error Boundaries 失效
React.Suspense & React.lazy 失效
React 合成事件冒泡失效
其他未发现的功能
但上述问题,大多数是可以通过桥接机制修复的
相同的、更早的实现还有 react-keep-alive[10]
结语
状态缓存是应用中十分常见的需求,在需要处理的数据量较少时,使用手动状态缓存就可以解决大多数问题,但当情况复杂时,还需要尝试将缓存功能单独拎出来解决,以便在业务开发过程中更好地进行关注点分离
目前的实现都有各自的问题,但其探究过程十分有趣,最好的方式仍是官方的支持,但目前还不能报太大期望
References
[1]
<keep-alive>
: https://cn.vuejs.org/v2/api/#keep-alive
[2]
issues: https://github.com/facebook/react/issues/12039
[3]
react-router: https://reacttraining.com/react-router/
[4]
react-live-route: https://github.com/fi3ework/react-live-route
[5]
react-keeper: https://github.com/vifird/react-keeper
[6]
react-router-cache-route: https://github.com/CJY0208/react-router-cache-route/blob/master/README_CN.md
[7]
react-router-cache-route: https://github.com/CJY0208/react-router-cache-route/blob/master/README_CN.md
[8]
react-activation: https://github.com/CJY0208/react-activation/blob/master/README_CN.md
[9]
在线示例: https://codesandbox.io/s/affectionate-beaver-solkt
[10]
react-keep-alive: https://github.com/StructureBuilder/react-keep-alive
如何实现 React 中的状态自动保存?相关推荐
- react怎么存上一页_如何实现 React 中的状态自动保存?
什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目, ...
- react大数据量渲染_React 中的状态自动保存(KeepAlive)
什么是状态保存?假设有下述场景:移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击 ...
- react中数据状态管理的四种方案
我们为什么需要状态管理? (1) 一个是为了解决相邻组件的通信问题. 虽然可以通过「状态提升」解决,但有两个问题: 每次子组件更新,都会触发负责下发状态的父组件的整体更新(使用 Context 也有这 ...
- [react] 描述下在react中无状态组件和有状态组件的区别是什么?
[react] 描述下在react中无状态组件和有状态组件的区别是什么? 1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板 ...
- [react] 在react中无状态组件有什么运用场景
[react] 在react中无状态组件有什么运用场景 适用于逻辑简单的纯展示的场景,如资料卡片等 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主 ...
- React中的状态管理---Mobx
Mobx的介绍 Mobx是一个功能强大,上手非常容易的状态管理工具.redux的作者也曾经向大家推荐过它,在不少情况下可以使用Mobx来替代掉redux. Mobx流程图 Mobx使用流程 创建项目 ...
- 利用Fiddler中的FiddlerScript自动保存抖音PC网页版视频链接(相当于一个爬虫)
目标网址: https://www.douyin.com/ 准备工具: 1.配置好的Fiddler 代码配置方法 首先找到Fiddler中的FiddlerScript 找到Go to 选择OnBefo ...
- mobx在react中应用_借助React Native Elements,Jest和MobX MST可以轻松实现现实世界中的ReactNative应用...
mobx在react中应用 by Qaiser Abbas 由Qaiser Abbas 借助React Native Elements,Jest和MobX MST可以轻松实现现实世界中的ReactNa ...
- HTTP协议无状态中的 状态 到底指的是什么?
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 作者 | 赛艇队长 来源 | cnblogs.com/bellko ...
- HTTP 无状态中的 状态 到底指的是什么?
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | https://www.cnblogs.com ...
最新文章
- python使用for循环打印99乘法表-python3:使用for循环打印九九乘法表
- [文件系统]文件系统学习笔记(一)---基本概念以及inode
- C#多线程学习(二) 如何操纵一个线程
- VOFM、Copy Control与合并开票
- [云炬创业基础笔记]第六章商业模式测试16
- 网络安全-安全散列函数,信息摘要SHA-1,MD5原理
- ajax each html 太多,HTML5学习小记二ajax,window.orientation,prototype.forEach
- img 标签 点击跳出图层_你竟然不知道cad图层也可以导出与导入?
- 解决svn:E200030: sqlite[S11]:database disk image is malformed
- python中cmd全称_【转】Python中执行cmd的三种方式
- 腾讯这套SpringMvc面试题你了解多少?(面试必备)
- 波段顶底 tdx 副图指标
- EasyUi模糊匹配搜索框combobox
- STM32F407 硬件IIC驱动MCP4017 数字电位器
- tf.keras计算FLOPs
- PHP编写投屏功能,win10如何投屏到电视
- Redis 九种数据结构及其底层实现 持久化 缓存机制 过期键与内存淘汰 集群等相关知识
- Android系统的开机画面显示过程分析(5)
- Trie 字符串统计+最大异或对
- 聚簇索引与非聚簇索引的区别以及SQL Server查询优化技术(评论很精彩)
热门文章
- D3D11 包围体碰撞检测
- 层次分析法原理讲解 python手搓实现-故事带入小白详解版
- 我只想说“独孤求败”与“东方不败”是不同的!
- HTML蒙版css,浅谈图片蒙版效果-webkit-mask_html/css_WEB-ITnose
- 一锄落花,葬在了寂寞的天涯
- 【转载】我的考试生涯:一个“放牛班”学生的逆袭
- 机器学习聚类算法:DBSCAN 对鸢尾花数据分类 C++实现
- 【bzoj4094】【洛谷3097】Optimal Milking
- 每日一题之 781. 森林中的兔子
- HTML5中多媒体标签之音频标签