基于 useEffect 封装高阶 hook API

4,716 阅读4分钟

本文首发于公众号「小李的前端小屋」,欢迎关注~

前言

useEffect 通常用于状态更新导致的副作用。

useEffect(effect, deps);

它有两个参数:

effect

effect 是一个表示副作用的函数,组件每渲染一次,该函数就自动执行一次。

deps

有时候,我们不希望 useEffect() 每次渲染都执行,这时可以使用它的第二个参数 deps,使用一个数组指定副作用函数的依赖项,只有依赖项发生变化,才会重新渲染。


本文主要分享一些基于 useEffect 封装的高阶 effect hook。

简单的封装

先来一个最简单的例子:只运行一次 effect 的 useEffectOnce

function useEffectOnece(effect) {
  useEffect(effect, []); // deps 为空
}

在组件生命周期中,挂载卸载的生命周期函数也只会执行一次,因此我们可以基于 useEffectOnce 来实现 useMountuseUnmount

function useMount(fn) {
  useEffectOnce(() => {
    fn();
  });
};
function useUnmount(fn) {
  const fnRef = useRef(fn);

  fnRef.current = fn; // 始终保证是最新的函数

  useEffectOnce(() => () => fnRef.current());
};

useAsyncEffect

useEffect 本身不支持 async 函数,我们不能这样写:

useEffect(async () => {
   await getData();
}, []);

理由是 effect 函数应该返回一个销毁函数,如果 useEffect 第一个参数传入 async 函数,返回值则变成了 Promise,会导致 react 在调用销毁函数的时候报错:function.apply is undefined

我们可以自己改造一下实现 useAsyncEffect,让 useEffect 支持 async 函数。

普通版

function useAsyncEffect(effect, deps) {
  useEffect(() => {
    const e = effect();

    async function execute() {
      await e;
    }
    execute();
  }, deps);
}

高级版:需要判断 generator 场景

function useAsyncEffect(effect, deps) {
  // 判断是否是生成器
  function isGenerator(val) {
    return typeof val[Symbol.asyncIterator] === 'function';
  }
  
  useEffect(() => {
    const e = effect();
    let cancelled = false;
    
    async function execute() {
      // 增加生成器判断分支
      if (isGenerator(e)) {
        // 无限迭代,直到拿到生成器最终结果
        while (true) {
          const result = await e.next();
          // 迭代过程中,组件已经卸载或者迭代完成,则不再继续
          if (cancelled || result.done) {
            break;
          }
        }
      } else {
        await e;
      }
    }
    execute();
    
    return () => {
      cancelled = true;
    };
  }, deps);
}

useUpdateEffect

有些场景我们不想在首次渲染时就执行 effect。比如搜索时,只在 keyword 变化时才调用 search 方法,我们可以封装 useUpdateEffect,它会忽略 useEffect 首次执行,只在依赖更新时执行。

// 用于记录当前渲染是否是首次渲染
function useFirstMountState() {
  const isFirst = useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  }

  return isFirst.current;
}

function useUpdateEffect(effect, deps) {
  const isFirstMount = useFirstMountState(); // 是否首次渲染

  useEffect(() => {
    if (!isFirstMount) { // 如果不是首次,则执行 effect 函数
      return effect();
    }
  }, deps);
};

useCustomCompareEffect

useEffect 的 deps 比较采用的是 Object.is 方法,比较的是值或引用是否完全一致。

function areHookInputsEqual(
  nextDeps: Array<mixed>,
  prevDeps: Array<mixed> | null,
) {
  if (prevDeps === null) {
    return false;
  }
  
  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  
  return true;
}

我们可以为 useEffect 增加自定义比较 deps 的能力:

function useCustomCompareEffect(effect, deps, depsEqual) {
  const ref = useRef(undefined); // 手动维护 deps
  
  // 用自定义方法判断不相同,才修改 deps
  if (!ref.current || !depsEqual(deps, ref.current)) {
    ref.current = deps;
  }

  useEffect(effect, ref.current);
};

继续基于 useCustomCompareEffect 封装两种常用的浅比较深比较 effect。

useShallowCompareEffect

采用浅比较的方式比较 deps

import { equal as isShallowEqual } from 'fast-shallow-equal';
// 浅比较
const shallowEqualDepsList = (prevDeps, nextDeps) =>
  prevDeps.every((dep, index) => isShallowEqual(dep, nextDeps[index]));
  
function useShallowCompareEffect(effect, deps) {
  useCustomCompareEffect(effect, deps, shallowEqualDepsList);
};

useDeepCompareEffect

采用深比较的方式比较 deps

import isDeepEqual from 'fast-deep-equal/react';

function useDeepCompareEffect(effect, deps) {
  useCustomCompareEffect(effect, deps, isDeepEqual);
};

节流防抖思想也可以用于 useEffect:

useDebounceEffect

为 useEffect 增加防抖的能力

主要思路:

  1. deps 变化,正常触发 effect,同时防抖开始计时
  2. deps 频繁变化,进行防抖处理,因此需要 flag 记录延迟是否结束
  3. 组件卸载后,取消防抖函数调用
// 用来处理防抖函数的 Hook
function useDebounceFn(fn, options) {
  // 保证 debounce 中每次取到的 fn 都是最新的
  const fnRef = useRef(fn);
  fnRef.current = fn;

  const wait = options?.wait ?? 1000;

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

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

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

function useDebounceEffect(effect, deps, debounceOptions) {
  const [flag, setFlag] = useState({}); // 记录延迟是否结束

  const { run, cancel } = useDebounceFn(() => {
    setFlag({});
  }, debounceOptions);
  
  // 正常 deps 变化,执行 effect,同时防抖开始计时
  useEffect(() => {
    return run();
  }, deps);
  
  // 组件卸载后,取消防抖函数调用
  useUnmount(cancel);
  
  // 使用 useUpdateEffect, 只在 flag 变化时执行 effect
  useUpdateEffect(effect, [flag]);
}

useThrottleEffect

为 useEffect 增加节流的能力

// `useThrottleEffect` 与 `useDebounceEffect` 类似,这里不再陈述
function useThrottleEffect(effect, deps, throttleOptions) {
  const [flag, setFlag] = useState({});
  
  const { run, cancel } = useThrottleFn(() => {
    setFlag({});
  }, options);

  useEffect(() => {
    return run();
  }, deps);

  useUnmount(cancel);

  useUpdateEffect(effect, [flag]);
}

结语

以上实现参考 react-useahooks。我们平时应该多使用这类工具 hook 来提效开发。

谢谢支持❤️

如果本文对你有帮助,帮我点个赞吧(关注更好^ ^。

我的公众号「小李的前端小屋」最近刚刚创建,还在不断完善中,关注我,一起变强!🚀