在 Web 应用开发中，处理页面卸载（unload）事件是一个重要但常常被忽视的方面。无论是提醒用户保存未保存的更改，还是执行一些清理操作，都需要在用户即将离开页面时进行处理。useUnload 钩子提供了一种简洁的方式来在 React 组件中处理 beforeunload 事件，使得在用户试图关闭或刷新页面时执行自定义逻辑变得简单。以下是如何实现和使用这个自定义钩子：
const useUnload = fn => {
const cb = React.useRef(fn);
React.useEffect(() => {
const onUnload = cb.current;
window.addEventListener('beforeunload', onUnload);
return () => {
window.removeEventListener('beforeunload', onUnload);
};
}, [cb]);
};
const App = () => {
useUnload(e => {
e.preventDefault();
const exit = confirm('Are you sure you want to leave?');
if (exit) window.close();
});
return <div>Try closing the window.</div>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
);
这个技巧的关键点包括：
使用 useRef来存储回调函数，避免不必要的效果重新运行。使用 useEffect来添加和移除beforeunload事件监听器。在组件卸载时清理事件监听器，防止内存泄漏。
