React useUnload钩子

处理beforeunload窗口事件。

• 使用useRef()钩子为回调函数fn创建一个引用。
• 使用useEffect()钩子和EventTarget.addEventListener()来处理'beforeunload'事件（当用户即将关闭窗口时）。
• 使用EventTarget.removeEventListener()在组件卸载后进行清理。

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('确定要离开吗？');
    if (exit) window.close();
  });
  return <div>尝试关闭窗口。</div>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
);