在React中实现和Vue一样舒适的keep-alive

最新推荐文章于 2024-10-03 23:38:26 发布
最新推荐文章于 2024-10-03 23:38:26 发布
阅读量3.8k 收藏 15
点赞数 2
文章标签： vue react js java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/petertanjinjie/article/details/107398782
版权
在React中，由于官方并未内置keep-alive功能，开发者需要借助第三方库如react-keep-alive来实现组件状态保存。然而，这类库可能会导致数据驱动失效。本文介绍了如何手动保存状态以及react-activation的优雅实现，通过 AliveScope 和 KeepAlive 组件配合，利用React的Context API实现组件缓存。此外，还提供了源码解析，帮助理解这一机制。
摘要由CSDN通过智能技术生成
写在开头

  • 在vue中有天然的keep-alive这个功能实现,react也有一个库,react-keep-alive，但是这个库是直接进行dom操作,会导致数据驱动失效,断层

  • 至于为什么会失效断层,大家可以看我之前对react-keep-alive这个库源码的研究讲解,大概一共1500行TS代码

  • 最近确实比较忙,没什么时间写文章，但是尽量给大家写一些实用的东西，也在准备做一个非常棒的东西给大家去学习

  • 如何在React中实现keep-alive？(react-keep-alive源码讲解)

  • 本源码库地址： 

  • https://github.com/search?q=react-activation

  • 使用安装

  • yarn add react-activation
# or
npm install react-activation
正式开始

  • 什么是状态保存？

  • 假设有下述场景：

  • 移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置࿰

最低0.47元/天 解锁文章
Peter 谭
关注
如何在React中实现keep-alive？
petertanjinjie的博客
06-04 7105
写在开头不推荐你使用本文这个库，这个库会造成数据驱动断层（即你缓存后，切换回来，确实可以看到跟之前一样的dom，但是数据驱动此时失效了）,下周我会写另外一个可以不断层的库解析❝现代框架的...
react 实现页面状态缓存（keep-alive）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-22 9360
因为 react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个 页面我滑倒了中间，然后跳转到 详情页然后 返回，之前的页面刷新了，回到顶部了肯定不行（搜索条件之类的消失了，滚动条回到顶部了）！比如：pc端项目后台管理项目里点击时 打开一个页签，页签切换，状态页会丢失。每次切换页签都重新请求了接口。
深度解析：在 React 中实现类似 Vue 的 KeepAlive 组件
liyananweb的博客
07-18 784
在 Vue 中，keep-alive是一个抽象组件，用于缓存不活动的组件实例。性能优化：避免不必要的重新渲染。状态保持：在组件切换时保持组件的状态。通过本文的介绍，我们了解了如何在 React 中实现类似 Vue 的keep-alive组件。虽然 React 没有内置的keep-alive组件，但通过高阶组件和 React Portal，我们可以实现类似的功能，从而提升应用的性能和用户体验。希望这篇文章对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论！
React之keep-alive组件
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
10-03 593
React之keep-alive组件
react-keepalive-router:基于react 16.8 +开发的react缓存组件，react router 4 +可用于缓存页面组件，类似于Vue keepalive包Vue路由器效果功能。（基于react 16.8 +，react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的Keepalive包装vue-router的效果功能）
03-18
react-keepalive-router 一介绍 基于react 16.8+ ， react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的keepalive封装vue-router的效果功能。 采用react hooks全新api ，支持缓存路由，手动解除缓存，增加了缓存的状态周期，监听函数等。 后续版本会完善其他功能。 演示 缓存组件+监听 二快速上手 下载 npm install react-keepalive-router --save # or yarn add react-keepalive-router 使用 1基本用法 KeepaliveRouterSwitch KeepaliveRouterSwitch可以理解为常规的Switch，也可以理解为keepaliveScope ，我们确保整个缓存作用域，只有一个KeepaliveRou
react如何做页面缓存？ 类似vue中的keep-alive
讨口子
07-17 2656
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中实现vue里keep-alive
m0_65943257的博客
10-13 186
项目里有需求从原始页面跳转到目标页面，在从目标页面返回到原始页面，原始页面的所有状态保留。
【React】实现类似vue的keepAlive组件的持久化
u013675821的博客
07-16 479
通过这个完整的案例，我们实现了一个类似于 Vue 的KeepAlive功能的组件，通过缓存组件的实例和其 childNodes，在重新渲染时通过读取childNodes恢复组件。通过这种方式，我们可以确保组件的实际 DOM 节点在卸载和重新挂载之间保持不变，从而实现了组件的持久化。
react实现keep-alive
qq_27175079的博客
05-11 1630
在项目中会遇到这样一个场景 上拉了N页的时候点进详情然后再返回列表，列表会重置，这里就需要对页面进行缓存，类似vue的keep-alive。 网上找了很多方案，可能demo是可以的，但是在复杂的场景下会有很多问题，基本上不能实现，经过一上午的折腾总算是弄出来了，采用的方案是 react-router-cache-route@1.8.4 代码如下 import React from "react"; import { HashRouter, Route } from "react-router-dom"; i
keep-alive不能缓存多层级路由菜单问题解决
10-15
在Vue.js应用中，`keep-alive`组件用于缓存组件状态，以便在导航到其他页面后仍能保留之前的状态，从而提高用户体验。然而，在处理多层级路由菜单时，可能会遇到`keep-alive`无法正确缓存的问题。这个问题通常发生在...
vue内置组件keep-alive多级路由缓存最佳实践
小陈的博客
10-30 2879
keep-alive缓存多级路由，主要思路根据路由的meta标识，然后在App.vue组件中keep-alive包裹路由标签，我们通过全局store变量去控制includes判断当前路由是否该被缓存，同时需要监听路由判断是否有需要缓存，通过设置全局cachePage去控制路由的缓存* 优化store数据流代码，可以减少代码，提高的代码模块的复用度* 当一个组件被缓存时，加载该缓存组件时是会触发activated钩子，当从一个缓存组件离开时，会触发，在特殊场景可以在这两个钩子函数上做些事情* 简略剖析。
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
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
10-17
首先，`<keep-alive>`是一个抽象组件，它的主要作用是将被包含的组件保留在内存中，避免在组件切换时销毁和重建。这在处理那些数据量较大、加载时间较长或者用户需要快速返回到之前状态的组件时特别有用。 1. **...
Vue 中 keep-alive 组件与 router-view 组件的那点事
vv_bug
12-01 3725
最近项目中有小伙伴找到我，问我“为啥他写的页面第一次进去可以触发 onCreate 函数，第二次再进的时候就不触发了呢？”（因为我们项目是一个大型的项目，每个开发可能只接触到自己开发的一小部分），然后我就说你可以试着在 activated 钩子函数中做处理，然后他又接着问我“activated 钩子函数又是怎么调用的呢？”，ok！这小子是问上瘾了，我们下面就来详细解析一下。 keep-alive <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra
React 怎么实现 Vue 的 <keep-alive> 组件
weixin_33984032的博客
03-18 563
如果你用过 Vue，那肯定知道它有一个非常好用的组件（keep-alive）能够保持组件的状态来避免重复重渲染。 有时，我们希望在列表页面进入详情页面后，缓存列表页面的状态；当从详情页面返回列表页面时，列表页面还是和切换前一样。 这实际上挺难实现的，因为 React 中的组件一旦卸载就无法重用。在 issue #12039 中提出了两种解决方案；通过样式来控制组件的显示（display：none ...
React实现keepAlive
LOVEjourneyQAQ的博客
06-26 1777
keep-alive是vue中的内置组件，使用keep-alive包裹组件可以在该组件的切换过程中将页面的状态缓存在内存中，界面切换后被包裹的组件实例不会被销毁，防止界面重复渲染DOM，并且可以防止在页面切换过程中组件的数据丢失。包裹在需要缓存的组件外侧，通过Provider把状态和方法传递给子组件，如果判断出reactElement已经传过来了，但是对应的nodes数组还是为null的话就触发相应的reducer把该nodes重新赋值。即：切换路由时缓存之前的组件，保留之前输入的值不被清空。
React18实现keepalive效果 react-router-dom@6 outlet 路由缓存 页面缓存
WCvison的博客
11-13 4229
React 18+实现Vue里面的keep-alive效果 react-router-dom@6 outlet 路由组件 路由页面缓存
react 实现类似vue中的<keep-alive>的功能，并解决antd-mobile切换回来时的空白
weixin_30411819的博客
12-25 574
在移动端的spa页面中，只要使用到了路由就很有必要使用到状态保存的功能，这样才能保证在页面进行切换的时候，让用户可以看到刚才滑动的地方，让用户的体验更加友好。这儿我找到了react-router-cache-route这个插件，使用方法直接参考文档。 在使用了这个插件以后，结合着antd-mobile使用时。会出现轮播图空白的现象，这个现象在手机端显得忧外的明显 上面问题的解决方法就是使用 r...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值