每天學(xué)習(xí)一個hooks?useMount
更新時間：2023年05月11日 15:12:09 作者：jimmy_fx
這篇文章主要為大家介紹了每天學(xué)習(xí)一個hooks?useMount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
??先講點廢話
useMount，在組件首次渲染時執(zhí)行。這個hook的用處也很多，比如有個select下拉框，里面的數(shù)據(jù)，就需要在初始化的時候請求后端的數(shù)據(jù)。
??來看看效果
可以看到，只有在初始化時，useMount執(zhí)行了，頁面重新渲染時，并不會執(zhí)行。
??源碼實現(xiàn)
const useMount = (fn: () => void) => {
// 判斷一下，傳如的fn是否時一個函數(shù)
if (isFunction(fn)) {
useEffect(() => {
fn?.();
}, []);
return;
}
console.error(`useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`);
};
??完整demo源碼
import { useEffect, useState } from "react";
import { isFunction } from "lodash";
const UseMountDemo = () => {
const [, setState] = useState({});
const useMount = (fn: () => void) => {
if (isFunction(fn)) {
useEffect(() => {
fn?.();
}, []);
return;
}
console.error(`useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`);
};
useMount(() => {
console.log("我只在初始化的時候運(yùn)行一次");
});
console.log("組件渲染了");
return <button onClick={() => setState({})}>重新render</button>;
};
export default UseMountDemo;
useUnmount
useUnmount，組件卸載時執(zhí)行的 Hook，比如組件卸載時，需要清楚定時器或者相關(guān)的監(jiān)聽，就可以使用useUnmount。
??參考
有興趣的小伙伴可以去看，react-use 和 ahooks 的源碼，學(xué)習(xí)前輩們優(yōu)雅的代碼??。
以上就是每天學(xué)習(xí)一個hooks useMount的詳細(xì)內(nèi)容，更多關(guān)于hooks useMount學(xué)習(xí)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react?card?slider實現(xiàn)滑動卡片教程示例
這篇文章主要為大家介紹了react?card?slider實現(xiàn)滑動卡片教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了JS跨域解決方案react配置反向代理的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
這篇文章主要介紹了react?事項懶加載的三種方法及使用場景，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了react?Scheduler?實現(xiàn)示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
詳解使用WebPack搭建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了Antd react上傳圖片格式限制的實現(xiàn)代碼,本文通過實例代碼圖文效果給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-12-12
React的createElement和render手寫實現(xiàn)示例
這篇文章主要為大家介紹了React的createElement和render手寫實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了React實現(xiàn)登錄表單的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Redux thunk中間件及執(zhí)行原理詳細(xì)分析
redux的核心概念其實很簡單：將需要修改的state都存入到store里，發(fā)起一個action用來描述發(fā)生了什么，用reducers描述action如何改變state tree，這篇文章主要介紹了Redux thunk中間件及執(zhí)行原理分析2022-09-09
react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案
最近在學(xué)習(xí)React的過程中遇到了路由跳轉(zhuǎn)后頁面不刷新的問題，本文就詳細(xì)的介紹一下解決方法，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06