共计 1399 个字符，预计需要花费 4 分钟才能阅读完成。
React 组件卸载生命周期、路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。以一个实际案例出发：
某单页应用的文章编辑页用户正在编辑文章，此时尚未保存。当用户不小心要跳转到另外一个路由时需要提醒用户是否继续跳转，这个过程需要触发路由跳转以及组件卸载；
而用户不小心点了关闭标签页按钮，或刷新了页面。这个过程触发了页面卸载事件；
在这个案例中我们需要实现：
1. 用户跳转页面时弹出提示框（路由采用 histroy 模式）
2. 用户关闭页面时弹出提示框
componentWillUnmount
首先这个钩子函数是在组件卸载前调用的一个函数，它并不能阻止当前组件的卸载。所以不要想方设法在这里做提示，因为即便提示了，组件还是会卸载，文章还是会消失。
路由守卫 -<Prompt/>
为了实现第一个功能，需要一个跳转路由之前进行的判断。在 react-router-dom 4.0 之后取消了先前的路由守卫（其实我没研究过之前版本的，这个描述摘自网络）。在 react-router-dom 4.0 之后，实现这个功能可以依靠 <Prompt/> 组件。文档链接↗
把这个组件添加到你的文章编辑页组件的任意部分
import {Prompt} from ‘react-router-dom’;
const Editor=()=>{
return (
<div>
<Prompt
when={true}
message={location => ‘ 文章要保存吼，确定离开吗？’}
/>
</div>
)
}
这里有一点需要注意，使用 <Prompt/> 时，你的路由跳转必须通过 <Link/> 实现，而不能依靠 <a/> 原生标签。点击取消时就会留在当前页面。至此已经实现了路由跳转时提醒用户进行保存的功能。
窗口关闭事件 -beforeunload
实现第二个功能需要依靠对窗口的监听。React 应用中对于窗口事件的应用远没有 DOM 事件频繁，所以好久没碰到还是有点手生的。最关键的就是，应该在何时进行监听？
应该在组件挂载时监听事件，组件卸载时移除事件监听。因为我已经开始全面采用 hooks 新特性了，所以这里使用到 useEffect。
import React,{useEffect} from ‘react’;
const Editor=()=>{
// 监听窗口事件
useEffect(() => {
const listener = ev => {
ev.preventDefault();
ev.returnValue=’ 文章要保存吼，确定离开吗？’;
};
window.addEventListener(‘beforeunload’, listener);
return () => {
window.removeEventListener(‘beforeunload’, listener)
}
}, []);
//return …
}
这里有几个需要注意的地方：
useEffect 第二个参数为空数组，表示只调用了 componentDidMount 和 componentWillUnmount 两个钩子
事件监听和移除的第二个参数为同一个事件处理函数
在 beforeunload 事件中的 confirm，prompt，alert 会被忽略。取而代之的是一个浏览器内置的对话框。（参考：MDN|beforeunload）
必须要有 returnValue 且为非空字符串，但是在某些浏览器中这个值并不会作为弹窗信息