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