内容简介: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 ... }
这里有几个需要注意的地方:
-
useEffect
第二个参数为空数组,表示只调用了componentDidMount
和componentWillUnmount
两个钩子 - 事件监听和移除的第二个参数为同一个事件处理函数
-
在
beforeunload
事件中的confirm
,prompt
,alert
会被忽略。取而代之的是一个浏览器内置的对话框。(参考: MDN|beforeunload ) -
必须要有
returnValue
且为非空字符串,但是在某些浏览器中这个值 并不会作为弹窗信息
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 彻底卸载干净oracle 11g
- [译]如何从 Ubuntu 卸载 Redis
- 云设计模式之: 网关卸载模式
- 那些你应该考虑卸载的 VSCode 扩展
- Debian完全卸载清理MySQL服务器
- Mac中mongoDB的安装与卸载步骤详解
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
正则表达式必知必会(修订版)
福达 (Ben Forta) / 杨涛 / 人民邮电出版社 / 2015-1-1 / 29.00元
《正则表达式必知必会》从简单的文本匹配开始,循序渐进地介绍了很多复杂内容,其中包括回溯引用、条件性求值和前后查找,等等。每章都为读者准备了许多简明又实用的示例,有助于全面、系统、快速掌握正则表达式,并运用它们去解决实际问题。正则表达式是一种威力无比强大的武器,几乎在所有的程序设计语言里和计算机平台上都可以用它来完成各种复杂的文本处理工作。而且书中的内容在保持语言和平台中立的同时,还兼顾了各种平台之......一起来看看 《正则表达式必知必会(修订版)》 这本书的介绍吧!