需要实现这个功能需要使用react的什么周期函数componentWillMount和componentWillUnmount，在这两个函数中对页面的改变状态进行监听，
//在组件初始化之后监听页面状态改变的事件
componentWillMount(){
window.addEventListener('beforeunload',this.beforeunload);
}
//销毁监听的事件
componentWillUnmount(){
//销毁拦截判断是否离开当前页面
window.removeEventListener('beforeunload',this.beforeunload);
}
//页面离开、刷新、上一步、浏览器关闭之前会被拦截的方法。
beforeunload=(e)=>{
//这里可以对数据库进行连接操作，关闭和释放一些资源
letconfirmationMessage='用户离开前的提示?';//这里写了也没什么效果，页面的提示框还是默认的，也不知道是为啥。
(e||window.event).returnValue=confirmationMessage;//这一行不能够少，少了就不会有提示。。
returnconfirmationMessage;
}
注意：你只有在加载完页面之后，对页面进行过人任何操作（包括点击），这监听方法才会生效，不然的话，如果加载完页面，直接点击关闭页面或者是刷新页面，这个监听事件是不会生效的，
作用： 在beforeunload方法中可以完成对后台一些资源的释放，例如对锁定的数据归档。
注意：监听了一个事件之后使用href跳转页面或者是下载东西的话，同样会被拦截，这里可以使用小技巧来完成对href不进行拦截的操作。
1：在state中保存一个boolean值，这个变量的作用就是让这个监听事件什么时候不进行拦截,默认false。
this.state = {
isHref:false,
}
2：在跳转页面的前后都修改这个boolean值
this.setState({
isHref:true //将状态码变成false
},()=>{
window.location.href = "http的跳转路径。。。。"; //执行跳转页面之前会被beforeunload方法所拦截
this.setState({
isHref:false //beforeunload方法拦截判断完之后，将状态码该变回来
})
})
3：在beforeunload监听事件中进行判断状态值，只有当状态值为false的时候，才进行拦截
componentWillMount () {
// 拦截判断是否离开当前页面
window.addEventListener('beforeunload', this.beforeunload);
}
componentWillUnmount () {
// 销毁拦截判断是否离开当前页面
window.removeEventListener('beforeunload', this.beforeunload);
}
//页面离开、刷新、上一步、浏览器关闭之前会被拦截的方法。
beforeunload =(e) =>{
let {isHrff} = this.state;
if(isVideoHref = false){
let confirmationMessage = '提示：确认退出页面?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
}
