反应组件如何实现卸载,路由跳转以及页面关闭之前进行提示的功能 - 行业资讯

　　介绍

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

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

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

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

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

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

1。用户跳转页面时弹出提示框(路由采用历史模式)

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

<强> componentWillUnmount

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

<>强路由守卫& lt;提示/祝辞

为了实现第一个功能,需要一个跳转路由之前进行的判断。在<代码> 4.0 react-router-dom之后取消了先前的路由守卫(其实我没研究过之前版本的,这个描述摘自网络)。在<代码> 4.0 react-router-dom之后,实现这个功能可以依靠<代码> & lt;提示/祝辞>

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

进口{提示}& # 39;react-router-dom& # 39;; 　　const编辑=()=祝辞{ 　　回报( 　　& lt; div> 　　& lt;提示　　当={真} 　　消息={位置=比;& # 39;文章要保存吼,确定离开吗? & # 39;}/比; 　　& lt;/div> 　　) 　　}

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

<强>窗口关闭事件-beforeunload

实现第二个功能需要依靠对窗口的监听.React应用中对于窗口事件的应用远没有DOM事件频繁,所以好久没碰到还是有点手生的。最关键的就是,应该在何时进行监听?

应该在组件挂载时监听事件,组件卸载时移除事件监听。因为我已经开始全面采用钩子新特性了,所以这里使用到useEffect。

进口反应,{useEffect} & # 39;反应# 39;; 　　　　const编辑=()=祝辞{//监听窗口事件　　useEffect(()=比;{ 　　const侦听器=ev=比;{ 　　ev.preventDefault (); 　　ev.returnValue=https://www.yisu.com/zixun/'文章要保存吼,确定离开吗?”; 　　}; 　　窗口。addEventListener (beforeunload,侦听器); 　　返回()=> { 　　窗口。removeEventListener (beforeunload,侦听器) 　　｝　　},[]);//返回…… 　　}

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

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

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

3,在beforeunload事件中的确认提示,警告会被忽略。取而代之的是一个浏览器内置的对话框。(参考:MDN | beforeunload)

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

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