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页的内容都 ...
随机推荐
- C语言之文件包含
c = #include <stdio.h> #include "A.h" int main() { /******************************** ...
- mac下Python安装路径的说明
Python安装路径的说明 mac在安装Python时, 对不同的安装方式 不同的型号均会安装在不同的文件夹下 安装方式 路径 系统默认(2.7) /System/Library/Frameworks ...
- Logstash详解之——filter模块-grok插件
1. grok插件:能匹配一切数据,但是性能和对资源的损耗也很大. grok内置字段类型参见: https://blog.csdn.net/cui929434/article/details/9439 ...
- Git部署项目
前言 学习Git的目标是要学会如何部署项目.Git是一种版本控制系统,与之对应的还有CVS和SVN,其中CVS和SVN都是集中式的版本控制,而Git是一种分布式的,在现代项目开发中,大多使用Git来管 ...
- java.lang.ThreadLocal的作用和原理?列举在哪些程序中见过ThreadLocal的使用?
java.lang.ThreadLocal的作用和原理?列举在哪些程序中见过ThreadLocal的使用? 说明类java.lang.ThreadLocal的作用和原理.列举在哪些程序中见过Threa ...
- Laravel 开发环境搭建
本人使用的是Laravel5.5版本,需要PHP7支持,所以安装的环境是Apache2.php7.0.mysql5.7,系统为ubuntu14.04LTS(14以下的版本对php7支持不够),主要参考 ...
- hdu第九场多校
02:线段树两次扫描 #include<bits/stdc++.h> #include<vector> using namespace std; #define maxn 30 ...
- 模拟字典序排序——hdu6034
#include <bits/stdc++.h> #include <iostream> using namespace std; ; ; int n; int maxj; s ...
- JAVA大数——lightoj1024
要用 System.gc() 清理内存 类必须命名成Main,一些大整数的操作 import java.math.BigInteger; import java.util.Scanner; publi ...
- error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead.【转载】
文章出处https://blog.csdn.net/qq_38721302/article/details/82850292 今天编写C++程序在使用头文件#include<cstring> ...