react自定义hooks之【useUpdateEffect】

useUpdateEffect 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行。

useUpdateEffect

思路

• 利用闭包缓存isMounted，首次把状态改为true，后面执行effect函数。

•   export const useUpdateEffect = (effect: EffectCallback, deps: DependencyList | undefined) => {
      const isMounted = useRef(false);
    
      // for react-refresh
      useEffect(() => {
        return () => {
          isMounted.current = false;
        };
      }, []);
    
      useEffect(() => {
        if (!isMounted.current) {
          isMounted.current = true;
        } else {
          return effect();
        }
      }, deps);
    };
  

• 代码量很少，重点就是思路要对。

• 万能的ref，工作场景中遇到bug，就用ref吧。

• 后期会更新更新的自定义hooks，欢迎一起探讨。