现象

使用ios设备和安卓设备移动端打开H5页面，点击手机自带的回退按键，会有一点点不一样

同样的代码，在ios设备和安卓设备的点击下，会触发不一样的效果： 当我们通过点击浏览器的后退按键，返回到当下的页面，

安卓设备会重新请求接口，获取到最新的数据然后渲染；

ios设备不会重新请求接口，也不会重新渲染页面；

import React, { useEffect, useState } from "react";
import { getIosRefreshApi } from './service/index';

const IosRefresh = () => {

  const [data, setData] = useState('初始');

  const getIosRefresh = async () => {
    const res = await getIosRefreshApi();
    setData(res.data.mock)
  };

  useEffect(() => {
    getIosRefresh();
  }, []);

  return (
    <div>
      <h1>IosRefresh</h1>
      {data}
    </div>
  );
};

export default IosRefresh;

原因

安卓设备和ios设备浏览器性能优化策略不一样

解决

思路：监听当前的页面是否是通过缓存来的，如果是强制更新数据；

这里我写了一个hook，可以即粘即用，这里有两种手段强制更新数据：

• 刷新整个页面
• 只针对需要的更新数据的接口进行接口层的刷新

通过是否传入接口来判断是进行接口级的刷新还是页面级的更新；

import { useEffect } from 'react';

type BrowserRuleType = {
  func?: () => void; // 传进来
};

function useBrowserRule(params?: BrowserRuleType) {

  const { func } = params || {};

  useEffect(() => {
    const browserRule = /^.*((iPhone)|(iPad)|(Safari)|(ios)|(iPod))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
      window.onpageshow = function(event) {
        if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
          if(func) {
            func();
          } else {
            window.location.reload();
          }
        }
      };
    }
  }, []);

}

export default useBrowserRule;