每天學習一個hooks useMount

Posted on by

🐶先講點廢話

useMount，在組件首次渲染時執行。這個hook的用處也很多，比如有個select下拉框，裡面的數據，就需要在初始化的時候請求後端的數據。

🦌來看看效果

可以看到，隻有在初始化時，useMount執行瞭，頁面重新渲染時，並不會執行。

🐿源碼實現

  const useMount = (fn: () => void) => {
    // 判斷一下，傳如的fn是否時一個函數
    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("我隻在初始化的時候運行一次");
  });
  console.log("組件渲染瞭");
  return <button onClick={() => setState({})}>重新render</button>;
};
export default UseMountDemo;

useUnmount

useUnmount，組件卸載時執行的 Hook，比如組件卸載時，需要清楚定時器或者相關的監聽，就可以使用useUnmount。

🍓參考

有興趣的小夥伴可以去看，react-use 和 ahooks 的源碼，學習前輩們優雅的代碼😍。

以上就是每天學習一個hooks useMount的詳細內容，更多關於hooks useMount學習的資料請關註WalkonNet其它相關文章！

推薦閱讀：