2022-07-13 工作记录--React-监听页面展示（处理ios缓存情况）

React-监听页面展示（处理ios缓存情况）

android 返回一般默认会清除缓存、刷新页面，不存在缓存情况；ios 返回一般会存在缓存情况。But，为了避免特殊情况，我都进行了处理~

一、前言

在项目中，遇到一种现象：当切换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;