我想要一个函数，在用户刷新页面之前向服务器发送请求（不关心响应）。
我试过使用这种componentWillUnmount方法，但页面刷新没有调用这个函数。例如
import React, { useEffect } from 'react';
const ComponentExample => () => {
useEffect(() => {
return () => {
// componentWillUnmount in functional component.
// Anything in here is fired on component unmount.
// Call my server to do some work
}
}, []) }
有没有人有任何想法如何做到这一点？
您可以尝试侦听window.beforeunload事件。
beforeunload当窗口、文档及其资源即将被卸载时触发该事件。文档仍然可见，此时事件仍然可以取消。
useEffect(() => {
const unloadCallback = (event) => { ... };
window.addEventListener("beforeunload", unloadCallback);
return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);
注意：这将响应导致页面卸载的任何内容。
笔记2：
但是请注意，并非所有浏览器都支持此方法，有些浏览器需要事件处理程序来实现以下两种遗留方法之一：
- 为事件的 returnValue 属性分配一个字符串
- 从事件处理程序返回一个字符串。
您几乎可以通过检查页面是否已刷新来完成此操作。
来源：https : //developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
例子：
if (window.performance) {
console.info("window.performance is supported");
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
console.info( "This page is reloaded" );
} else {
console.info( "This page is not reloaded");
}
}