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

栏目: IOS · Android · 发布时间: 5年前

内容简介:React组件卸载生命周期、路由跳转和页面关闭三者看起来有些类似的地方,比如都是当前组件即将从视口消失,但实际上所触发的事件均不相同。以一个实际案例出发:在这个案例中我们需要实现:首先这个钩子函数是在组件卸载前调用的一个函数,它并不能阻止当前组件的卸载。所以不要想方设法在这里做提示,因为即便提示了,组件还是会卸载,文章还是会消失。

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

点击取消时就会留在当前页面。至此已经实现了路由跳转时提醒用户进行保存的功能。

窗口关闭事件- 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 第二个参数为空数组,表示只调用了 componentDidMountcomponentWillUnmount 两个钩子
  2. 事件监听和移除的第二个参数为同一个事件处理函数
  3. beforeunload 事件中的 confirmpromptalert 会被忽略。取而代之的是一个浏览器内置的对话框。(参考: MDN|beforeunload
  4. 必须要有 returnValue 且为非空字符串,但是在某些浏览器中这个值 并不会作为弹窗信息

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

独角兽之路

独角兽之路

三节课产品社区 / 电子工业出版社 / 2016-7 / 79.00元

对2~3年以上经验的互联网人来说,最好的学习可能不是听课,而是分析各类真实的产品和运营案例。而《独角兽之路:20款快速爆发且极具潜力的互联网产品深度剖析(全彩)》正好提供了对滴滴出行、百度外卖、懂球帝、快手App等20款极具代表性的准独角兽产品的发展路径的深度分析。 通过阅读《独角兽之路:20款快速爆发且极具潜力的互联网产品深度剖析(全彩)》,你可以发现互联网产品发展的背后,或许存在着某些共......一起来看看 《独角兽之路》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换