自定义dom重现函数useResume

处理逻辑，经常需要在dom重现使用时回掉函数（重新请求数据，重新定义状态等），以下是工作中常用的一个重新回掉函数的定义：

 

import { useEffect } from "react";

export default function useResume(fn: any, deps: Array<any>) {
function getResumeEventInfo() {
// 设置隐藏属性和改变可见属性的事件的名称
let hidden;
let visibilityChange;
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document['msHidden'] !== 'undefined') {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document['webkitHidden'] !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
}
return { hidden, visibilityChange };
}

useEffect(() => {
const { visibilityChange, hidden } = getResumeEventInfo();


const handleVisibleChange = () => {
// 页面可见
fn(document[hidden]);
}

document.addEventListener(visibilityChange, handleVisibleChange, false);

return () => {
document.removeEventListener(visibilityChange, handleVisibleChange, false);
}
}, [...deps]);
}



使用方法：

useResume((hidden) => {

 

    if (!hidden ) {

    retryFetch();//重新请求接口数据（自定义）

   }

}, []);