react中的keep-alive功能
在vue中可以很方便的实现keep-alive功能,但是在react中却不是很方便,遇事不要慌,度娘来帮忙。
react-keep-alive
首先找到的是react-keep-alive
,一波操作之后,发现原来显示的页面不显示了,唉,抬下去,下一个!
react-activation
这个真香,具体怎么使用不再介绍,请查看中文文档,使用的时候要认真查看文档,同一个父节点下,相同位置的 <KeepAlive>
默认会使用同一份缓存,要想实现多份需要增加动态id
属性来区分。手动控制缓存(tabBar的关闭),给需要控制缓存的 <KeepAlive />
标签增加 name
属性,使用 withAliveScope
或 useAliveController
获取控制函数。
小瑕疵(这并不是react-activation的问题)
被缓存的组件第二次打开不会执行生命周期的钩子函数,这样导致一些依赖执行生命周期的钩子函数才能正常显示的组件出现问题。大多数情况都可以通过react-activation
提供的withActivation
装饰器或者使用 useActivate
与 useUnactivate
hooks 钩子解决,但是我遇到的是跨项目的(组件库项目中的某个组件依赖执行生命周期的钩子函数才能正常显示)。
详细说一下问题,被缓存的页面a中包含一个组件库中的组件B,组件B中在componentDidMount
中重置大小并且监听resize事件来重新计算大小,componentWillUnmount
中移除监听。使用了react-activation
之后就不会执行componentWillUnmount
也就没有移除监听事件,当打开a页面,之后点开b页面(包含组件B,触发resize之后),返回到a页面,a页面中B组件显示异常。
使用withActivation装饰器处理
尝试在组件库的组件B中引入
react-activation
d的withActivation
,结果发现并不会触发对应的钩子函数,查看源码可以了解到其依赖Context
,不同的Context
当然不会生效。于是开始尝试把withActivation
通过window
进行传递,这个方法可以解决,但是这样导致两个项目的耦合度很高,这样处理并不是很好。监听路由变化,触发
resize
事件首先尝试的是使用
history
的监听事件listen
,在路由变化的时候很好的监听到,但是浏览器的前进后退事件触发的路由变化没监听到。因此使用监听window
的popstate
事件,此事件包含了history
的监听事件,所以只使用这一个事件监听就好了。主动触发事件使用的是dispatchEvent
,使用Event
构造函数创建事件不兼容IE
。const routeChangeCB = useCallback((e) => {let ev = document.createEvent('Event')ev.initEvent('resize', true, true)window.dispatchEvent(ev)}, []);useEffect(() => {window.addEventListener('popstate', routeChangeCB, false);return () => {window.removeEventListener('popstate', routeChangeCB)};}, [location])
react中的keep-alive功能相关推荐
- react中react-custom-scrollbars返回顶部功能,如何使其有平滑动画效果;原生js scroll平滑动画效果
1.Scrollbars是react-custom-scrollbars插件暴露出来的组件 scrollRef.current.view.scroll({top: 0,left: 0,behavior ...
- react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
- react怎么存上一页_如何实现 React 中的状态自动保存?
什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目, ...
- react 中渲染html_如何在React中识别和解决浪费的渲染
react 中渲染html by Nayeem Reza 通过Nayeem Reza 如何在React中识别和解决浪费的渲染 (How to identify and resolve wasted r ...
- react中如何注释代码_学习在您的React / JavaScript代码中发现红旗?
react中如何注释代码 by Donavon West 由Donavon West 学习在您的React / JavaScript代码中发现红旗? (Learn to spot red flags ...
- 如何在React中使用功能组件
Have you wondered how to create a component in React? 您是否想过如何在React中创建组件? To answer, it is as simple ...
- React中,通过iframe,实现文件下载功能
简要介绍:我们可以通过iframe,动态设置src,来实现下载功能. 1.通用的iframe实现下载功能. <script>function download() {var url=&qu ...
- React中实现倒计时功能根据接口防止刷新
react中实现根据接口返回的毫秒数,显示倒计时:还剩于00分00秒 import React,{ Component } from 'react'; class OrderDetail extend ...
- 处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
最新文章
- 二叉树的层次遍历 II
- 第十四课.马尔科夫链
- 学习笔记——Numpy基本操作(二)
- Fedora安装Nvidia显卡驱动方法
- 【编译原理】为什么编程语言中,标识符不能以数字开头?
- Mysql闪回工具之binlog2sql的原理及其使用
- 好男人必看!女生的30条隐私……
- Unity 提取游戏资源之ktx转换
- 关于一道面试题,使用C#实现字符串反转算法
- Java中ArrayList,Vector,LinkedList,HashMap,HashTable,HashSet对比及总结
- 一些iptables的具体应用
- matlab图像的读取和保存
- 图片怎么转换成pdf格式?
- iis发布网站无法连接服务器,IIS网站部署常见问题处理
- 对话海尔CEO张瑞敏
- 达梦数据库的备份还原
- 锐起无盘精华100问!(包括3.1,3.0版本)
- 动作事件监听器——实现ActionListener接口
- 基于STM32单片机的差分升级(增量升级)算法
- 再谈“所托非人勿怪人,忠人之事需灵变”
热门文章
- 使用markman助力移动应用开发
- [Xcode 实际操作]七、文件与数据-(18)使用MarkMan与设计师进行心灵沟通
- 9大吸金手游公司盘点 2013年营收破1亿美元
- 9. 【gRPC系列学习】连接失败处理:backoff协议
- 两个div右侧固定,左侧自适应屏幕
- 获取手机IMSI,区分移动联通 电信,4G问题
- C# vb .net实现玻璃桌子效果滤镜
- android 按钮点击退出程序,Android:按下后退按钮退出应用程序
- 王者荣耀英雄选择系统项目
- H2O with R 简明使用手记·上篇