[ahooks] useMount useUnmount useUnmountedRef源码阅读

Point2025-07-14 10:18

useMount

生命周期Hooks，只在组件初始化时执行

源码

源码很简单，就是一个依赖数组为空的useEffect，调用前加了一个入参是否为函数的校验

tsx 复制代码

import { useEffect } from 'react';
import { type EffectCallback } from 'react';
import { isFunction } from '../utils';
import isDev from '../utils/isDev';

const useMount = (fn: EffectCallback) => {
  if (isDev) {
    if (!isFunction(fn)) {
      console.error(
        `useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`,
      );
    }
  }

  useEffect(() => {
    return fn?.();
  }, []);
};

export default useMount;

useUnmount

在组件卸载（unmount）时执行的 Hook

源码

仍然是一个没有依赖项的useEffect，调用函数的位置变成了useEffect的return函数里

useLatest 主要是为了避免闭包问题

tsx 复制代码

import { useEffect } from 'react';
import useLatest from '../useLatest';
import { isFunction } from '../utils';
import isDev from '../utils/isDev';

const useUnmount = (fn: () => void) => {
  if (isDev) {
    if (!isFunction(fn)) {
      console.error(`useUnmount expected parameter is a function, got ${typeof fn}`);
    }
  }

  const fnRef = useLatest(fn);

  useEffect(
    () => () => {
      fnRef.current();
    },
    [],
  );
};

export default useUnmount;

useUnmountedRef

获取当前组件是否已经卸载的 Hook

源码

tsx 复制代码

import { useEffect, useRef } from 'react';

const useUnmountedRef = () => {
  const unmountedRef = useRef(false);
  useEffect(() => {
    unmountedRef.current = false;
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return unmountedRef;
};

export default useUnmountedRef;