11.自定义hooks

1. 只在组件初始化时执行的 Hook。

import {
     useEffect } from 'react';
import {
     isFunction } from '@src/utils/type';

export default function useMount(func) {
    
  if (process.env.NODE_ENV === 'development') {
    
    if (!isFunction(func)) {
    
      console.error(`useMount: parameter \`fn\` expected to be a function, but got "${
      typeof func}".`);
    }
  }

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

2. 返回当前最新值的 Hook，可以避免闭包问题。

import {
     useRef } from 'react';

function useLatest(value) {
    
  const ref = useRef(value);
  ref.current = value;
  return ref;
}

export default useLatest;

3. 节流hook

import {
     throttle } from 'lodash';
import {
     useMemo } from 'react';
import {
     isFunction } from '@src/utils/type';
import useLatest from '../useLatest';
import useUnmount from '../useUnMount';

function useThrottleFn(fn, options) {
    
  if (process.env.NODE_ENV === 'development') {
    
    if (!isFunction(fn)) {
    
      console.error(`useThrottleFn expected parameter is a function, got ${
      typeof fn}`);
    }
  }
  const fnRef = useLatest(fn);

  const wait = options?.wait ?? 1000;

  const debounced = useMemo(
    () =>
      throttle(
        (...args) => {
    
          fnRef.current(...args);
        },
        wait,
        options,
      ),
    [],
  );

  useUnmount(() => {
    
    debounced.cancel();
  });

  return {
    
    run: debounced,
    cancel: debounced.cancel,
    flush: debounced.flush,
  };
}
export default useThrottleFn;

4. 防抖hook

import {
     debounce } from 'lodash';
import {
     useMemo } from 'react';

import {
     isFunction } from '@src/utils';
import useLatest from '../useLatest';
import useUnmount from '../useUnMount';

/** * @description: 用来处理防抖的hook * @param {Function} fn: 需要防抖执行的函数 * @param {Object} options: 配置防抖的行为 * wait: 等待时间 * maxWait: 最大等待时间 * @return {Object} * run: 触发执行 fn，函数参数将会传递给 fn * cancel: 取消防抖 * flush: 立即调用当前防抖函数 */
function useDebounceFn(fn, options) {
    
  if (process.env.NODE_ENV === 'development') {
    
    if (!isFunction(fn)) {
    
      console.error(`useDebounceFn expected parameter is a function, got ${
      typeof fn}`);
    }
  }

  const fnRef = useLatest(fn);

  const wait = options?.wait ?? 1000;

  const debounced = useMemo(
    () =>
      debounce(
        (...args) => {
    
          fnRef.current(...args);
        },
        wait,
        options,
      ),
    [],
  );

  useUnmount(() => {
    
    debounced.cancel();
  });

  return {
    
    run: debounced,
    cancel: debounced.cancel,
    flush: debounced.flush,
  };
}

export default useDebounceFn;

5. 可以对effect依赖数组进行深层比较的hook

import {
     useEffect, useRef } from 'react';
import {
     isEqual } from 'lodash';

const depsEqual = (aDeps, bDeps) => isEqual(aDeps, bDeps);

function createDeepCompareEffect(hook) {
    
  return (effect, deps) => {
    
    const ref = useRef();
    const signalRef = useRef(0);

    if (deps === undefined || !depsEqual(deps, ref.current)) {
    
      ref.current = deps;
      signalRef.current += 1;
    }
    hook(effect, [signalRef.current]);
  };
}

export default createDeepCompareEffect(useEffect);