摘要:組件卸載生命周期路由跳轉(zhuǎn)和頁面關(guān)閉三者看起來有些類似的地方,比如都是當(dāng)前組件即將從視口消失,但實際上所觸發(fā)的事件均不相同。至此已經(jīng)實現(xiàn)了路由跳轉(zhuǎn)時提醒用戶進(jìn)行保存的功能。
React組件卸載生命周期、路由跳轉(zhuǎn)和頁面關(guān)閉三者看起來有些類似的地方,比如都是當(dāng)前組件即將從視口消失,但實際上所觸發(fā)的事件均不相同。以一個實際案例出發(fā):
某單頁應(yīng)用的文章編輯頁用戶正在編輯文章,此時尚未保存。當(dāng)用戶不小心要跳轉(zhuǎn)到另外一個路由時需要提醒用戶是否繼續(xù)跳轉(zhuǎn),這個過程需要觸發(fā)路由跳轉(zhuǎn)以及組件卸載;
而用戶不小心點了關(guān)閉標(biāo)簽頁按鈕,或刷新了頁面。這個過程觸發(fā)了頁面卸載事件;
在這個案例中我們需要實現(xiàn):
1. 用戶跳轉(zhuǎn)頁面時彈出提示框(路由采用histroy模式)
2. 用戶關(guān)閉頁面時彈出提示框
componentWillUnmount首先這個鉤子函數(shù)是在組件卸載前調(diào)用的一個函數(shù),它并不能阻止當(dāng)前組件的卸載。所以不要想方設(shè)法在這里做提示,因為即便提示了,組件還是會卸載,文章還是會消失。
路由守衛(wèi)-為了實現(xiàn)第一個功能,需要一個跳轉(zhuǎn)路由之前進(jìn)行的判斷。在react-router-dom 4.0 之后取消了先前的路由守衛(wèi)(其實我沒研究過之前版本的,這個描述摘自網(wǎng)絡(luò))。在react-router-dom 4.0之后,實現(xiàn)這個功能可以依靠
把這個組件添加到你的文章編輯頁組件的任意部分
import {Prompt} from "react-router-dom"; const Editor=()=>{ return () }"文章要保存吼,確定離開嗎?"} />
這里有一點需要注意,使用
點擊取消時就會留在當(dāng)前頁面。至此已經(jīng)實現(xiàn)了路由跳轉(zhuǎn)時提醒用戶進(jìn)行保存的功能。
實現(xiàn)第二個功能需要依靠對窗口的監(jiān)聽。React應(yīng)用中對于窗口事件的應(yīng)用遠(yuǎn)沒有DOM事件頻繁,所以好久沒碰到還是有點手生的。最關(guān)鍵的就是,應(yīng)該在何時進(jìn)行監(jiān)聽?
應(yīng)該在組件掛載時監(jiān)聽事件,組件卸載時移除事件監(jiān)聽。因為我已經(jīng)開始全面采用hooks新特性了,所以這里使用到useEffect。
import React,{useEffect} from "react"; const Editor=()=>{ //監(jiān)聽窗口事件 useEffect(() => { const listener = ev => { ev.preventDefault(); ev.returnValue="文章要保存吼,確定離開嗎?"; }; window.addEventListener("beforeunload", listener); return () => { window.removeEventListener("beforeunload", listener) } }, []); //return ... }
這里有幾個需要注意的地方:
useEffect第二個參數(shù)為空數(shù)組,表示只調(diào)用了componentDidMount和componentWillUnmount兩個鉤子
事件監(jiān)聽和移除的第二個參數(shù)為同一個事件處理函數(shù)
在beforeunload事件中的confirm,prompt,alert會被忽略。取而代之的是一個瀏覽器內(nèi)置的對話框。(參考:MDN|beforeunload)
必須要有returnValue且為非空字符串,但是在某些瀏覽器中這個值并不會作為彈窗信息
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/101121.html
摘要:還是先來一段官方的基礎(chǔ)使用案例,熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件,作為的頂層組件來獲取的和設(shè)置回調(diào)函數(shù)來更新。 react-router是react官方推薦并參與維護(hù)的一個路由庫,支持瀏覽器端、app端、服務(wù)端等常見場景下的路由切換功能,react-router本身不具備切換和跳轉(zhuǎn)路由的功能,這些功能全部由react-router依賴的history庫完成,his...
摘要:還是先來一段官方的基礎(chǔ)使用案例,熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件,作為的頂層組件來獲取的和設(shè)置回調(diào)函數(shù)來更新。 react-router是react官方推薦并參與維護(hù)的一個路由庫,支持瀏覽器端、app端、服務(wù)端等常見場景下的路由切換功能,react-router本身不具備切換和跳轉(zhuǎn)路由的功能,這些功能全部由react-router依賴的history庫完成,his...
showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起,出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫,利用他們構(gòu)建出來的單頁面應(yīng)用,也是越來越接近原生的體驗,再也不是以前的點擊標(biāo)簽跳轉(zhuǎn)頁面,刷新整個頁面了,那么他們的原理是什么呢? 優(yōu)質(zhì)gitHub開源練手項目: ...
閱讀 1310·2021-11-22 14:44
閱讀 2445·2021-09-30 09:47
閱讀 1221·2021-09-09 11:56
閱讀 2076·2021-09-08 09:45
閱讀 3953·2021-08-31 09:40
閱讀 1250·2019-08-30 15:52
閱讀 2044·2019-08-30 14:09
閱讀 1578·2019-08-26 17:04