移动端 ios pageShow 事件和 android visibilitychange 事件; A页面跳转到B页面操作更新数据后，A页面的数据也要跟着刷新

1. pageshow 事件

当浏览器因导航而显示窗口的文档时，pageshow事件将被触发。这包括：

• 初始加载页面
• 从同一窗口或选项卡中的另一个页面导航到该页面
• 在移动操作系统上恢复冻结页面
• 使用浏览器的前进或后退按钮返回页面

注意：在初始页面加载期间，pageshow事件会在事件之后load触发。

2. visibilitychange 事件

visibilitychange当其选项卡的内容变得可见或已隐藏时，将在文档上触发该事件。

 例如：过渡到隐藏时暂停音乐

此示例在文档可见时开始播放音乐曲目，并在文档不再可见时暂停音乐。

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

3. 封装公共函数： 在A页面跳转到B页面操作更新数据后，A页面的数据也要跟着刷新

/**
 * page resume from background, focus again
 */
export function onPageResume(callback) {
  const IOS_VERSION = getiOSVersion();
  if (isIos() && versionCompare(IOS_VERSION, '10.3') === -1) {
    const onShow = (e) => {
      if (e.persisted) {
        callback();
      }
    };
    window.addEventListener('pageshow', onShow, false);
    return () => {
      window.removeEventListener('pageshow', onShow);
    };
  }
  const onShow = () => {
    const state = document.visibilityState;
    if (state === 'visible') {
      callback();
    }
  };
  document.addEventListener('visibilitychange', onShow, false);
  return () => {
    document.removeEventListener('visibilitychange', onShow);
  };
}

export function getiOSVersion() {
  const ua = navigator.userAgent;
  return (ua.match(/\b[0-9]+_[0-9]+(?:_[0-9]+)?\b/) || [''])[0].replace(/_/g, '.');
}

export function isIos() {
  const ua = navigator.userAgent || '';
  return /iPad|iPhone|iPod/.test(ua);
}

/**
 * versionCompare
 * @param {current version} v1
 * @param {aim version} v2
 */
const versionCompare = (v1, v2) => {
  const GTR = 1;
  const LSS = -1;
  const EQU = 0;
  const v1arr = String(v1)
    .split('.')
    .map((a) => parseInt(a));
  const v2arr = String(v2)
    .split('.')
    .map((a) => parseInt(a));
  const arrLen = Math.max(v1arr.length, v2arr.length);
  let result;

  if (v1 == undefined || v2 == undefined) {
    throw new Error();
  }

  if (v1.length == 0 && v2.length == 0) {
    return EQU;
  } else if (v1.length == 0) {
    return LSS;
  } else if (v2.length == 0) {
    return GTR;
  }

  // eslint-disable-next-line
  for (let i = 0; i < arrLen; i++) {
    result = xxcanghaiComp(v1arr[i], v2arr[i]);
    if (result == EQU) {
      continue; // eslint-disable-line
    } else {
      break;
    }
  }
  return result;

  function xxcanghaiComp(n1, n2) {
    if (typeof n1 !== 'number') {
      n1 = 0;
    }
    if (typeof n2 !== 'number') {
      n2 = 0;
    }
    if (n1 > n2) {
      return GTR;
    } else if (n1 < n2) {
      return LSS;
    }
    return EQU;
  }
};

4. 使用封装函数demo( reactHook useEffect)

  useEffect(() => {
    refreshData(); //to refresh data
    return onPageResume(() => {
      refreshData();
    });
  }, [refreshData]);