useThrottleEffect

作用

为 useEffect 增加节流的能力。

原理

通过调用 lodash 的 throttle 方法来实现的。依赖于 useThrottleFn。

源码

import { useEffect, useState } from 'react'
import type { DependencyList, EffectCallback } from 'react'
import type { ThrottleOptions } from '../useThrottle/throttleOptions'
import useThrottleFn from '../useThrottleFn'
import useUpdateEffect from '../useUpdateEffect'

function useThrottleEffect(
  effect: EffectCallback,
  deps?: DependencyList,
  options?: ThrottleOptions
) {
  // 设置flag标识，只有flag改变才会执行useUpdateEffect中的effect
  const [flag, setFlag] = useState({})

  // 用来处理函数节流的 Hook
  const { run } = useThrottleFn(() => {
    setFlag({})
  }, options)

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

  // flag依赖项改变时，执行effect
  useUpdateEffect(effect, [flag])
}

export default useThrottleEffect