React组件卸载、路由跳转乃至页面关闭（刷新）此前停止提醒的实-百分百源码网

React组件卸载、路由跳转乃至页面关闭（刷新）此前停止提醒的实

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于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>
    )
}

这里有一点需要留意，使用<Prompt/>时，你的路由跳转必需通过<Link/>实现，而不克不及依托<a/>原生标签。
点击取消时就会留在当前页面。至此已经实现了路由跳转时提示会员停止留存的功效。

窗口关闭事件-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组件卸载、路由跳转乃至页面关闭（刷新）此前停止提醒的实现办法的具体内容，更多请关注百分百源码网其它相关文章！

打赏