React组件卸载、路由跳转、页面关闭（刷新）之前进行提示

leanote 发布于2019-08-23 14:46 / 1500人阅读

摘要：组件卸载生命周期路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。至此已经实现了路由跳转时提醒用户进行保存的功能。

React组件卸载生命周期、路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。以一个实际案例出发：

某单页应用的文章编辑页用户正在编辑文章，此时尚未保存。

当用户不小心要跳转到另外一个路由时需要提醒用户是否继续跳转，这个过程需要触发路由跳转以及组件卸载；

而用户不小心点了关闭标签页按钮，或刷新了页面。这个过程触发了页面卸载事件；

在这个案例中我们需要实现：

1. 用户跳转页面时弹出提示框（路由采用histroy模式）

2. 用户关闭页面时弹出提示框

componentWillUnmount

首先这个钩子函数是在组件卸载前调用的一个函数，它并不能阻止当前组件的卸载。所以不要想方设法在这里做提示，因为即便提示了，组件还是会卸载，文章还是会消失。

路由守卫-

为了实现第一个功能，需要一个跳转路由之前进行的判断。在react-router-dom 4.0 之后取消了先前的路由守卫（其实我没研究过之前版本的，这个描述摘自网络）。在react-router-dom 4.0之后，实现这个功能可以依靠组件。文档链接↗

把这个组件添加到你的文章编辑页组件的任意部分

import {Prompt} from "react-router-dom";
const Editor=()=>{
    return (
        
           "文章要保存吼，确定离开吗？"}
          />
        
    )
}

这里有一点需要注意，使用时，你的路由跳转必须通过实现，而不能依靠原生标签。
点击取消时就会留在当前页面。至此已经实现了路由跳转时提醒用户进行保存的功能。

窗口关闭事件-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且为非空字符串，但是在某些浏览器中这个值并不会作为弹窗信息

云服务器 idc机房托管 js提示框跳转页面页面关闭提示js js关闭页面前提示 asp返回之前页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101121.html

react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

itvincent 2019-08-26 13:51 评论0 收藏0
react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

Joyven 2019-08-02 15:06 评论0 收藏0
彻底理清前端单页面应用（SPA）的实现原理【精读源码】

showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 随着React Vue前端框架的兴起，出现了Vue-router,react-router-dom等前端路由管理库，利用他们构建出来的单页面应用，也是越来越接近原生的体验，再也不是以前的点击标签跳转页面，刷新整个页面了，那么他们的原理是什么呢？优质gitHub开源练手项目： ...

xiaodao 2019-08-02 15:39 评论0 收藏0