useUnmount

用法

loading

源码

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;

useLatest 的作用是返回一个最新的值，这里主要是为了解决闭包问题。

import { useRef } from 'react';

function useLatest<T>(value: T) {
  const ref = useRef(value);
  ref.current = value;

  return ref;
}

export default useLatest;

解读

先是环境判断，开发模式下传入参数的类型不为 Function 时，输出错误日志。

然后，主要逻辑就是上面高亮的 15-17 行，用 useEffect 包了一层，然后再将入参函数的执行结果返回。