React元件卸載、路由跳轉以及頁面關閉（刷新）之前進行提示的實作方法

本篇文章帶給大家的內容是關於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/>時，你的路由跳轉必須透過實現，而不能依賴原生標籤。
點擊取消時就會留在目前頁面。至此已經實現了路由跳轉時提醒用戶進行保存的功能。

視窗關閉事件-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元件卸載、路由跳轉以及頁面關閉（刷新）之前進行提示的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！