每天一個hooks學習之useUnmount
更新時間：2023年05月09日 09:26:12 作者：jimmy_fx
這篇文章主要為大家介紹了每天一個hooks學習之useUnmount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
useUnmount，組件卸載時執(zhí)行的 Hook，比如組件卸載時，需要清除定時器或者相關的監(jiān)聽，就可以使用useUnmount。
??來看看效果
可以看到，只有在子組件銷毀時時，useUnmount才執(zhí)行了。
??源碼實現(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 的源碼，學習前輩們優(yōu)雅的代碼
以上就是每天一個hooks學習之useUnmount的詳細內容，更多關于hooks useUnmount的資料請關注腳本之家其它相關文章！
相關文章
react router4+redux實現(xiàn)路由權限控制的方法
本篇文章主要介紹了react router4+redux實現(xiàn)路由權限控制的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
state和props類似，都是一種存儲屬性的方式，但是不同點在于state只屬于當前組件，其他組件無法訪問，這篇文章主要介紹了React?18中的state概念與使用、注意問題，需要的朋友可以參考下2022-12-12
在React中寫一個Animation組件為組件進入和離開加上動畫/過度效果
這篇文章主要介紹了在React中寫一個Animation組件為組件進入和離開加上動畫/過度效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
React報錯之Parameter event implicitly has a
這篇文章主要為大家介紹了React報錯之Parameter event implicitly has an any type，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
react-native 封裝選擇彈出框示例(試用ios&android)
本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android)，具有一定的參考價值，有興趣的可以了解一下2017-07-07
最近兩個項目都用到了React Navigation，所以就研究一下如何使用，本文主要介紹了react-navigation6.x路由庫的基本使用，感興趣的可以了解一下2021-11-11
使用react-router4.0實現(xiàn)重定向和404功能的方法
本篇文章主要介紹了使用react-router4.0實現(xiàn)重定向和404功能的方法，具有一定的參考價值，有興趣的可以了解一下2017-08-08
React Router中Link和NavLink的學習心得總結
這篇文章主要介紹了React Router中Link和NavLink的學習心得總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了react中的渲染機制以及相關的優(yōu)化方案，內容包括react渲染步驟、concurrent機制以及產生作用的機會，簡單模擬實現(xiàn) concurrent mode，基于作業(yè)調度優(yōu)先級的思路進行項目優(yōu)化的兩個hooks，感興趣的小伙伴跟著小編一起來看看吧2023-07-07