React组件如何实现卸载、路由跳转以及页面关闭之前进行提示的功能-创新互联

这篇文章给大家分享的是有关React组件如何实现卸载、路由跳转以及页面关闭之前进行提示的功能的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联公司是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：响应式网站开发、成都品牌网站建设、成都营销网站建设。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。成都网站设计、网站制作、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。

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 ...
}

这里有几个需要注意的地方：

1、useEffect第二个参数为空数组，表示只调用了componentDidMount和componentWillUnmount两个钩子

2、事件监听和移除的第二个参数为同一个事件处理函数

3、在beforeunload事件中的confirm，prompt，alert会被忽略。取而代之的是一个浏览器内置的对话框。（参考：MDN|beforeunload）

4、必须要有returnValue且为非空字符串，但是在某些浏览器中这个值并不会作为弹窗信

感谢各位的阅读！关于React组件如何实现卸载、路由跳转以及页面关闭之前进行提示的功能就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：React组件如何实现卸载、路由跳转以及页面关闭之前进行提示的功能-创新互联
URL标题：http://6mz.cn/article/dpdjgp.html