react 实现类似vue中的<keep-alive>的功能,并解决antd-mobile切换回来时的空白
在移动端的spa页面中,只要使用到了路由就很有必要使用到状态保存的功能,这样才能保证在页面进行切换的时候,让用户可以看到刚才滑动的地方,让用户的体验更加友好。这儿我找到了react-router-cache-route这个插件,使用方法直接参考文档。
在使用了这个插件以后,结合着antd-mobile使用时。会出现轮播图空白的现象,这个现象在手机端显得忧外的明显

上面问题的解决方法就是使用 react-router-cache-route 这个插件以后额外引入的声明周期,然后使用 forceUpdate 进行强制更新。代码如下:
constructor (props) {
...
props.cacheLifecycles.didRecover(this.componentDidRecover)
}
componentDidRecover = () => {
console.log('被恢复时');
// 强制更新
this.forceUpdate();
}
react 实现类似vue中的<keep-alive>的功能,并解决antd-mobile切换回来时的空白的更多相关文章
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- vue中router-link的click事件失效的解决办法
title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...
- Vue中:error 'XXXXX' is not defined no-undef解决办法
Vue中:error 'XXXXX' is not defined no-undef解决办法 报错内容: × Client Compiled with some errors in 7.42s √ S ...
- vue中使用JSX报错,如何解决
Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...
- react 有没有类似vue中watch这样的api?
就是 当组件里state 里的数据发生变化可以监听到这个数据的变化 当数据发生变化的时候做一些事情 比如ajax请求 ?初学react 用vue的时候会用watch 和computed 去监听数据发生 ...
- React中循环渲染类似Vue中 的v-for
17==>循环数组 类似v-for import React, { Component } from "react"; export default class CharSh ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- 在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结
当我们在开发中遇到tab切换,这时候用el的el-tabs感觉很方便 但当我在把代码都写完后,发现一个问题就是页面打开时 虽然我们只能看见当前一个tab页,但是vue会帮你把你写的所有tab页的内容都 ...
随机推荐
- ArcGis基础——Excel表格插入ArcMap布局视图,记录显示不全的替代解决方法
前几天帮朋友处理了这样一个问题 Excel有200余行记录,插入到ArcMap布局视图,只能显示100行左右. 解决思路 ArcMap要素类的属性表可以插入到布局视图,可否把Excel挂接到要素类的属 ...
- C#跨线程访问(二)----thread参数、回调传参数
一.单个参数(封箱也可实现多参数) class B { public static void Main() { Thread t = new Thread(ne ...
- 2018-8-10-win10-uwp-反射
title author date CreateTime categories win10 uwp 反射 lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17: ...
- 一个服务io占满,服务器无响应
(1).服务器io占满,服务无响应, sar -q -f /var/log/sa/sa28 上图显示plist-sz 增加了一倍 plist-sz 说明:进程列表中的进程(processes)和线程 ...
- 程序‘vim’已包含在下列软件包中
解决方法: 输入:sudo apt-get install ctags 输入:sudo apt-get install vim 输入:sudo ./config.sh (亲测有效)输入:vim tes ...
- 25 面向对象设计实例——基于PCL点云库的通用工具开发
0 引言 问题背景:pcl中提供了大量工具,用于对点云和三角面片文件进行处理和显示.在研究中,存在很多简易的需求,比如点云坐标转换,点云的打开显示以及同步显示,点云的最小包络求解,点云的格式转换等等. ...
- 利用Delphi全面控制Windows任务栏
使用Windows95/NT/98操作系统的用户知道:Windows正常启动后,在电脑屏幕下方出现一块 任务栏.从系统功能角度而言,整个任务栏包括几个不同的子区域,从左至右依次是:开始 按钮.应用程序 ...
- thinkphp 原生分页
paginate() 是有三个参数: 第一个参数是 $listRows [int],也就是当前的页数 第二个参数是 $simple [boolean], 是否简洁模式或者总记录数 第三个参数是 $co ...
- Spring-Security (学习记录六)--采用ehcache缓存UserDetails
目录 1. spring-security提供了缓存UserDetails的UserDetailsService实现类. 2. 通过配置来完成缓存 UserDetails (使用ehcache) 3. ...
- mac 安装配置使用 mongoldb
mac 安装配置使用 mongoldb 安装和配置 brew install mongos brew install mongo # 密码就是用户的密码 # 配置数据文件 //如果不配置会出现错误62 ...