React-监听页面展示
一、前言
在项目中，遇到一种现象：当切换
A页面进入B页面，再返回A页面时，并未调用A页面生命周期componentDidMount里的方法（比如：刷新页面、调用接口请求数据等）。
- 比如：当我们完成浏览任务时，点击任务列表里的「去完成」按钮，跳转到指定的链接页面里完成任务后，返回任务列表页面，却发现按钮状态并未变成「已完成」；但是，我们确实在生命周期
componentDidMount里写了刷新任务列表接口滴呢，所以按常理来说，进入任务列表页面时，应该会刷新接口、重新渲染按钮状态噻~那现在这种情况是为何呢？为何未调用任务列表页面生命周期componentDidMount里的方法呢？请往下看吧??
二、问题分析与解决
这种情况是缓存：即上一步操作是什么，就停留在上一步，并不会自动刷新页面，自然也不会调用页面生命周期
componentDidMount里的方法了。
假如遇到这种情况，该如何解决呢？
- 可以通过 监听页面展示，当页面出现时，进行对应操作即可。
下面是我写的监听页面展示 的公式，直接套用即可哦~
- 注意：
componentDidMount和pageShow并不会同时进入：假如有缓存情况，就会进入pageShow；假如没有缓存情况，就会进入componentDidMount。所以需要单独处理哦~
import React,{Component} from 'react';
class HomePage extends Component {
async componentDidMount() {
/** TODO: 在这儿写下非缓存情况时 页面展示后需要进行的操作~ */
await store.homeIndex(); // 调用接口-获取到首页数据
store.showPrizePop(); // 调用接口-有奖品信息时，就会弹出奖品信息弹窗，展示对应奖品
// 监听页面展示-针对情况：返回时页面为缓存而非刷新【缓存: 即页面未刷新、未调用接口请求数据】
const isIos = /ipad|iPhone|Mac/i.test(window.navigator.userAgent);
if (isIos) { // ios
window.addEventListener('pageshow', this.iosPageShow.bind(this), this);
} else { // Android
document.addEventListener("visibilitychange", this.androidPageShow.bind(this), this);
}
}
// ios下的页面展示
iosPageShow = () => {
console.info('ios visible');
// 在这儿写下缓存情况时 页面展示后需要进行的操作~【我封装成了一个函数，直接写到该函数里即可】
this.pageShow();
}
// android下的页面展示
androidPageShow = () => {
if (window.visibilityState === "visible") {
console.info('android visible');
// 在这儿写下缓存情况时 页面展示后需要进行的操作~【我封装成了一个函数，直接写到该函数里即可】
this.pageShow();
}
}
// 封装函数-页面展示
pageShow = async () => {
/** TODO: 在这儿写下缓存情况时 页面展示后需要进行的操作~ */
store.getQueryTasks(); // 调用接口-刷新任务列表数据
await store.homeIndex(); // 调用接口-获取到首页数据
store.showPrizePop(); // 调用接口-有奖品信息时，就会弹出奖品信息弹窗，展示对应奖品
}
componentWillUnmount() {
window.removeEventListener('pageshow', this.iosPageShow.bind(this), this);
document.removeEventListener("visibilitychange", this.androidPageShow.bind(this), this);
}
render() {
return (
<div className="homePage"></div>
);
}
}
export default HomePage;
