参考链接：
1.https://blog.csdn.net/weixin_45499478/article/details/116464981
2.https://www.jb51.cc/faq/2966190.html
我自定义一个钩子，需要在第一次调用时跳过运行useEffect函数时使用。

解决方案

方案一：

import { useEffect,useRef } from 'react';

export default const useDidUpdateEffect = (fn: any,inputs: any) => {
  const didMountRef = useRef(false);
  useEffect(() => {
    if (didMountRef.current) fn();
    else didMountRef.current = true;
  }, inputs);
};

使用方法：

useDidUpdateEffect(() => {
  console.log(useDidUpdateEffect,'useDidUpdateEffect----');
}, [user]);

方案二：

import { useCallback,useEffect,useRef } from 'react';
export default (fn: any,deps: any) => {
  const isFirstRun = useRef(true);
  const execFunc = useCallback(fn,deps);
  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }
    execFunc();
  },[execFunc])
};

使用方法：

import useEffectSkipFirst from 'hooks/useEffectSkipFirst';
useEffectSkipFirst(() => {
  // fetch new user by name
},[name])

很明显，此挂钩在严格模式下的工作方式完全不同，在该模式下它将在第一次调用时执行一个函数，因为useEffect挂钩将被调用两次。之所以调用它两次，是因为它的依赖项是从useState（或react-redux的useSelector）返回的变量，在严格模式下被调用了两次。因此，它会在首次运行时进行API调用，而直到用户更改后才进行。

我可以解决此问题的唯一方法是通过监听NODE_ENV变量，在开发的情况下，如果其他环境，我将阻止该函数的执行直到第3次调用，而在第2次调用之前将其阻止直到第二次调用。