自定义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();//重新请求接口数据(自定义)
}
}, []);