React组件卸载生命周期、路由跳转、页面关闭看起来有些相似，比如当前组件即将从视口消失，但实际触发不同事件。先从一个实际案例说起：用户正在单页应用的文章编辑页面编辑一篇文章，但是还没有保存。当用户不小心跳到另一条路线时，需要提醒用户是否继续跳转。这个过程需要触发路由跳转和组件卸载；并且用户不小心点击了关闭标签按钮或刷新了页面。该过程触发页面卸载事件；这种情况下我们需要实现：1.用户跳转到页面时弹出提示框（路由采用histroy方式）2.用户关闭页面时弹出提示框componentWillUnmount首先，这个钩子函数是当componentisunmounted之前调用的一个函数，它不会阻止当前组件的卸载。所以这里不要试图做提示，因为即使提示了，组件还是会被卸载，文章还是会消失。Routingguard-为了实现第一个功能，需要在跳转到路由之前进行判断。react-router-dom4.0之后取消了之前的routingguard（其实之前的版本我没研究过，这个描述摘自网上）。在react-router-dom4.0之后，可以依赖组件来实现这个功能。文档链接↗将此组件添加到您的帖子编辑页面组件的任何部分import{Prompt}from'react-router-dom';constEditor=()=>{return(
)}这里需要注意一点，使用
时，你的路由跳转必须经过
实现而不依赖于
本机标记。当您单击取消时，您将停留在当前页面。至此，实现了路由跳转提醒用户保存的功能。窗口关闭事件-beforeunload实现第二个功能需要依赖窗口的监听。窗口事件在React应用中的应用远没有DOM事件那么频繁，所以好久没遇到还是有点陌生??。最重要的是，什么时候应该进行监控？该事件应该在组件挂载时监听，事件监听器应该在组件卸载时移除。因为我已经开始全面采用hooks的新特性，所以这里使用了useEffect。importReact,{useEffect}from'react';constEditor=()=>{//监听窗口事件useEffect(()=>{constlistener=ev=>{ev.preventDefault();ev.returnValue='article你确定要保存事件吗？';};window.addEventListener('beforeunload',listener);return()=>{window.removeEventListener('beforeunload',listener)}},[]);//返回。..}这里有几点需要注意：useEffect的第二个参数是一个空数组，也就是说只调用了componentDidMount和componentWillUnmount。事件监听和移除的第二个参数是同一个事件处理器，在beforeunload事件中的confirm、prompt和alert都会被忽略。相反，浏览器中内置了一个对话框。（参考：MDN|beforeunload）必须有一个returnValue并且是一个非空字符串，但是在某些浏览器中这个值不会被用作弹出信息
