每天學(xué)習(xí)一個(gè)hooks?useMount

更新時(shí)間：2023年05月11日 15:12:09 作者：jimmy_fx

這篇文章主要為大家介紹了每天學(xué)習(xí)一個(gè)hooks?useMount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

??先講點(diǎn)廢話

useMount，在組件首次渲染時(shí)執(zhí)行。這個(gè)hook的用處也很多，比如有個(gè)select下拉框，里面的數(shù)據(jù)，就需要在初始化的時(shí)候請求后端的數(shù)據(jù)。

??來看看效果

可以看到，只有在初始化時(shí)，useMount執(zhí)行了，頁面重新渲染時(shí)，并不會執(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;