每天一個(gè)hooks學(xué)習(xí)之useUnmount
引言
useUnmount,組件卸載時(shí)執(zhí)行的 Hook,比如組件卸載時(shí),需要清除定時(shí)器或者相關(guān)的監(jiān)聽(tīng),就可以使用useUnmount。
??來(lái)看看效果
可以看到,只有在子組件銷毀時(shí)時(shí),useUnmount才執(zhí)行了。
??源碼實(shí)現(xiàn)
const useUnmount = (fn: () => void) => { const fnRef = useRef(fn); fnRef.current = fn; useEffect(() => () => fn?.(), []); };
??完整demo源碼
import { useEffect, useRef, useState } from "react"; // 自定義useUnmount hooks const useUnmount = (fn: () => void) => { const fnRef = useRef(fn); fnRef.current = fn; useEffect(() => () => fn?.(), []); }; const Child = () => { useUnmount(() => { console.log("子組件銷毀了"); }); return <div>我是子組件</div>; }; const UseUnmountDemo = () => { const [showChild, setShowChild] = useState(true); return ( <> {showChild && <Child />} <button onClick={() => setShowChild(!showChild)}>顯示銷毀子組件</button>; </> ); }; export default UseUnmountDemo;
??參考
有興趣的小伙伴可以去看,react-use 和 ahooks 的源碼,學(xué)習(xí)前輩們優(yōu)雅的代碼
以上就是每天一個(gè)hooks學(xué)習(xí)之useUnmount的詳細(xì)內(nèi)容,更多關(guān)于hooks useUnmount的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法
本篇文章主要介紹了react router4+redux實(shí)現(xiàn)路由權(quán)限控制的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05React?18中的state概念與使用、注意問(wèn)題解決
state和props類似,都是一種存儲(chǔ)屬性的方式,但是不同點(diǎn)在于state只屬于當(dāng)前組件,其他組件無(wú)法訪問(wèn),這篇文章主要介紹了React?18中的state概念與使用、注意問(wèn)題,需要的朋友可以參考下2022-12-12在React中寫(xiě)一個(gè)Animation組件為組件進(jìn)入和離開(kāi)加上動(dòng)畫(huà)/過(guò)度效果
這篇文章主要介紹了在React中寫(xiě)一個(gè)Animation組件為組件進(jìn)入和離開(kāi)加上動(dòng)畫(huà)/過(guò)度效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06React報(bào)錯(cuò)之Parameter event implicitly has a
這篇文章主要為大家介紹了React報(bào)錯(cuò)之Parameter event implicitly has an any type,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08react-native 封裝選擇彈出框示例(試用ios&android)
本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android),具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07詳解react-navigation6.x路由庫(kù)的基本使用
最近兩個(gè)項(xiàng)目都用到了React Navigation,所以就研究一下如何使用,本文主要介紹了react-navigation6.x路由庫(kù)的基本使用,感興趣的可以了解一下2021-11-11使用react-router4.0實(shí)現(xiàn)重定向和404功能的方法
本篇文章主要介紹了使用react-router4.0實(shí)現(xiàn)重定向和404功能的方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08React Router中Link和NavLink的學(xué)習(xí)心得總結(jié)
這篇文章主要介紹了React Router中Link和NavLink的學(xué)習(xí)心得總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07React渲染機(jī)制及相關(guān)優(yōu)化方案
這篇文章主要介紹了react中的渲染機(jī)制以及相關(guān)的優(yōu)化方案,內(nèi)容包括react渲染步驟、concurrent機(jī)制以及產(chǎn)生作用的機(jī)會(huì),簡(jiǎn)單模擬實(shí)現(xiàn) concurrent mode,基于作業(yè)調(diào)度優(yōu)先級(jí)的思路進(jìn)行項(xiàng)目?jī)?yōu)化的兩個(gè)hooks,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-07-07