每天一個(gè)hooks學(xué)習(xí)之useUnmount
更新時(shí)間：2023年05月09日 09:26:12 作者：jimmy_fx
這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUnmount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
引言
useUnmount，組件卸載時(shí)執(zhí)行的 Hook，比如組件卸載時(shí)，需要清除定時(shí)器或者相關(guān)的監(jiān)聽(tīng)，就可以使用useUnmount。
??來(lái)看看效果
可以看到，只有在子組件銷(xiāo)毀時(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("子組件銷(xiāo)毀了");
});
return <div>我是子組件</div>;
};
const UseUnmountDemo = () => {
const [showChild, setShowChild] = useState(true);
return (
<>
{showChild && <Child />}
<button onClick={() => setShowChild(!showChild)}>顯示銷(xiāo)毀子組件</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中用less的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-04-04
這篇文章主要介紹了詳解react-refetch的使用小例子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要介紹了react的context和props的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-11-11
比ant更豐富Modal組件功能實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了比ant更豐富Modal組件功能實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
簡(jiǎn)談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的方法示例
ListView作為React Native的核心組件,用于高效地顯示一個(gè)可以垂直滾動(dòng)的變化的數(shù)據(jù)列表。下面這篇文章主要給大家介紹了關(guān)于react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
使用React代碼動(dòng)態(tài)生成柵格布局的方法
這篇文章主要介紹了使用React簡(jiǎn)短代碼動(dòng)態(tài)生成柵格布局的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
基于React實(shí)現(xiàn)搜索GitHub用戶功能
在本篇博客中,我們將介紹如何在 React 應(yīng)用中搜索 GitHub 用戶并顯示他們的信息,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
ReactNative踩坑之配置調(diào)試端口的解決方法
本篇文章主要介紹了ReactNative踩坑之配置調(diào)試端口的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
React在定時(shí)器中無(wú)法獲取狀態(tài)最新值的問(wèn)題
這篇文章主要介紹了React在定時(shí)器中無(wú)法獲取狀態(tài)最新值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08