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页的内容都 ...
随机推荐
- 用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...
- Vue之数据排序加签
这篇随笔小编给大家带来的是数据排序加签: 所谓数据加签,就是把数据进行加密再传给后端,这样保证数据的秘密性.不容易被修改和获取:排序就是根据公司要求对字段进行排序,有些公司会把字段根据a-z排序,有些 ...
- 转载:mysql sql_safe_updates 分析
今天看到一个很实用的功能,mysql_safe_updates. 只是对功能做了转载,具体原理可以看一下 delete from table t where true ; update t set c ...
- Mybatis_环境搭建
1.配置pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- 2019-5-16-WPF-光标初始化的时候-temp-文件夹满了无法创建
title author date CreateTime categories WPF 光标初始化的时候 temp 文件夹满了无法创建 lindexi 2019-05-16 19:16:27 +080 ...
- while循环和for循环
while循环 n='我怎么那么可爱呀' count= while count<len(n): print(n[count]) count+= for循环 n='我怎么那么可爱呀' for i ...
- Java内存管理简述
转自:http://www.codeceo.com/article/java-memory-area.html 一.概述 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干不同的数据 ...
- pandas-append()
DataFrame.append(self,other,ignore_index = False,verify_integrity = False,sort = Nore) 作用是将其他对象附加到调用 ...
- SSL/TLS工作原理
以前已经介绍过HTTP协议和HTTPS协议的区别,这次就来了解一下HTTPS协议的加密原理. 为了保证网络通信的安全性,需要对网络上传递的数据进行加密.现在主流的加密方法就是SSL (Secure S ...
- Dart编程字符串
String数据类型表示一系列字符.Dart字符串是一系列UTF 16代码单元. Dart中的字符串值可以使用 单引号 或 双引号 或 三引号 表示.单行字符串使用单引号或双引号表示.三引号用于表示多 ...