我的编程空间,编程开发者的网络收藏夹
学习永远不晚

React中怎么实现状态自动保存

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

React中怎么实现状态自动保存

这篇文章给大家介绍React中怎么实现状态自动保存,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

 

什么是状态保存?

假设有下述场景:

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

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

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

如何实现 React 中的状态保存

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

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

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

手动保存状态,是比较常见的解决方式,可以配合 React 组件的 componentWillUnmount 生命周期通过 redux 之类的状态管理层对数据进行保存,通过 componentDidMount 周期进行数据恢复

在需要保存的状态较少时,这种方式可以比较快地实现我们所需功能,但在数据量大或者情况多变时,手动保存状态就会变成一件麻烦事了

作为程序员,当然是尽可能懒啦,为了不需要每次都关心如何对数据进行保存恢复,我们需要研究如何自动保存状态

通过路由实现自动状态保存(通常使用 react-router)

既然 React 中状态的丢失是由于路由切换时卸载了组件引起的,那可以尝试从路由机制上去入手,改变路由对组件的渲染行为

我们有以下的方式去实现这个功能

  1.  重写 <Route> 组件,可参考 react-live-route[4]

  重写可以实现我们想要的功能,但成本也比较高,需要注意对原始 <Route> 功能的保存,以及多个 react-router 版本的兼容

    2.  替换路由库为 react-keeper[5]

  完全替换掉路由方案是一个风险较大的事情,需要较为慎重地考虑3.

  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") {       childrenchildren = 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],得到的效果大致如下图,

React中怎么实现状态自动保存

上述探究了通过路由入手实现自动状态保存的可能,以及现有的实现,但终究不是真实的、纯粹的 KeepAlive 功能,接下来我们尝试探究真实 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中怎么实现状态自动保存

关于React中怎么实现状态自动保存就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

React中怎么实现状态自动保存

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

react18中react-redux状态管理怎么实现

这篇文章主要介绍“react18中react-redux状态管理怎么实现”,在日常操作中,相信很多人在react18中react-redux状态管理怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”rea
2023-06-30

怎么使用Laravel和SSR实现保存登录状态

这篇“怎么使用Laravel和SSR实现保存登录状态”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用Laravel和S
2023-07-05

React Native中怎么实现动态导入

这篇文章主要介绍“React Native中怎么实现动态导入”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“React Native中怎么实现动态导入”文章能帮助大家解决问题。背景随着业务的发展,每一
2023-07-02

Android中怎么通过自定义view实现动态柱状图

这篇文章将为大家详细讲解有关Android中怎么通过自定义view实现动态柱状图,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。自定义viewpublic class Histogram ex
2023-05-30

windows中navicat怎么自动保存

这篇文章主要介绍“windows中navicat怎么自动保存”,在日常操作中,相信很多人在windows中navicat怎么自动保存问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”windows中navicat
2022-12-05

react跳转前记住页面状态怎么实现

react实现跳转前记住页面状态的方法:1、监听path变化,当path变化时更新lastPath和currentPath到redux store中;2、在离开页面A时,将页面状态保存到redux store中;3、如果redux store中的lastPath等于页面B的path,则认为A是由B返回还原状态,否则不还原。
2023-05-14

Android应用中怎么实现自定义状态栏

这篇文章给大家介绍Android应用中怎么实现自定义状态栏,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、目标:Android5.0以上二、步骤1、在res-values-colors.xml下新建一个RGB颜色
2023-05-31

React远程动态组件怎么实现

这篇文章主要介绍了React远程动态组件怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React远程动态组件怎么实现文章都会有所收获,下面我们一起来看看吧。远程动态组件实现远程动态组件库远程动态组件库项
2023-07-05

vue怎么实现动态的选中状态切换效果

这篇文章主要介绍了vue怎么实现动态的选中状态切换效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么实现动态的选中状态切换效果文章都会有所收获,下面我们一起来看看吧。动态选中状态切换效果 HTML中的
2023-06-30

ASP.NET中怎么实现状态管理和会话存储

在ASP.NET中,可以使用以下方法来实现状态管理和会话存储:ViewState:ViewState是用于在页面间保持状态的一种方法。它可以在页面上存储数据,并在页面间进行传递。Session:Session用于在服务器端存储用户的会话数据
ASP.NET中怎么实现状态管理和会话存储
2024-05-09

React组件状态下移和内容提升怎么实现

本篇内容介绍了“React组件状态下移和内容提升怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言两个简单实用的优化组件渲染性能的方
2023-07-04

怎么实现zabbix自定义监控nginx状态

这篇文章主要介绍“怎么实现zabbix自定义监控nginx状态”,在日常操作中,相信很多人在怎么实现zabbix自定义监控nginx状态问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么实现zabbix自定义
2023-06-25

Java如何实现properties文件动态修改并自动保存工具类

这篇文章主要为大家展示了“Java如何实现properties文件动态修改并自动保存工具类”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Java如何实现properties文件动态修改并自动保存
2023-05-30

C#中对象状态模式怎么实现

这篇文章主要介绍了C#中对象状态模式怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇C#中对象状态模式怎么实现文章都会有所收获,下面我们一起来看看吧。定义枚举表示教程进度首先用一个枚举,表示教程进行的不同
2023-06-30

编程热搜

目录