23.useUnload

文章预览

在 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  ( ………………………………