ahooks dive

用法

useDebounceEffect.ts

import { useEffect, useState } from 'react';
import type { DependencyList, EffectCallback } from 'react';
import type { DebounceOptions } from '../useDebounce/debounceOptions';
import useDebounceFn from '../useDebounceFn';
import useUpdateEffect from '../useUpdateEffect';

function useDebounceEffect(
  effect: EffectCallback,
  deps?: DependencyList,
  options?: DebounceOptions,
) {
  const [flag, setFlag] = useState({});

  const { run } = useDebounceFn(() => {
    setFlag({});
  }, options);

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

  useUpdateEffect(effect, [flag]);
}

export default useDebounceEffect;

解读

关于 useDebounceFn、useUpdateEffect，可以查看对应文档：useDebounceFn、useUpdateEffect。

function useDebounceEffect(
  effect: EffectCallback,
  deps?: DependencyList,
  options?: DebounceOptions,
) {
  // 1. 首先，使用 useState 定义了一个 flag 状态，用于记录依赖是否更新。
  const [flag, setFlag] = useState({});

  // 2. 然后，使用 useDebounceFn 来处理防抖值。
  const { run } = useDebounceFn(() => {
    setFlag({});
  }, options);

  // 3. 接着，使用 useEffect 来监听依赖的更新，并调用 run 函数来更新防抖值。
  useEffect(() => {
    return run();
  }, deps);

  // 4. 最后，使用 useUpdateEffect 来监听 flag 的变化，并执行 effect。
  useUpdateEffect(effect, [flag]);
}

执行流程：deps 更新 -> 执行 run 函数 -> flag 更新 -> 执行 effect。

由于 useUpdateEffect 会忽略首次执行，如果需要首次执行，可以通过 useDebounceFn 的 options 参数来设置。

const { run } = useDebounceFn(
  () => {
    setFlag({})
  },
  {
    wait: 1000,
    // 设置为 true，表示在延迟开始前调用
    leading: true, 
  },
)

useDebounceEffect

用法

解读

On this page