3 个自定义防抖 Hooks 的实现原理

时间:2022-12-29 01:28:03

前言

本文通过实现 useDebounceFn、useDebounce、useDebounceEffect 3 种自定义防抖 Hooks,来介绍在日常开发过程中自定义 Hooks 的思路及实现,帮助大家完成通用 Hooks 来提高开发效率。

防抖

防抖的概念已经司空见惯了,这里稍作简单介绍:

  • 举例:输入事件,原本连续输入 10 个字符会触发 10 次事件,使用防抖可以在间断输入时才触发一次事件
  • 防抖:某连续事件可通过防抖定义为超过指定时间事件才触发

一个简单的防抖可以通过闭包+定时器实现:

function debounce(fn, delay{
  let timer = null

  return function (...args{
    // 下一次触发时清空定时器,这样事件就要等新的定时器结束后才执行了
    if (timer) {
      clearTimeout(timer)
    }

    timer = setTimeout(() => {
      fn.call(this, ...args)
    }, delay)
  }
}

在 React 函数组件内防抖

真实场景

比如有一个这样的需求,是在更新 Input 输入框时,搜索数据。

类似的功能图如下:

3 个自定义防抖 Hooks 的实现原理

通过 React useEffect,简单的 demo 实现如下:

import { Input } from 'antd'
import { useEffect, useState } from 'react'
import './App.css'

function App({
  const [val, setVal] = useState('')

  const onSearch = (val) => {
    console.log('搜索', val || '全部')
  }

  const onChange = (e) => setVal(e.target.value)

  // 当 val 发生变化时,请求搜索数据
  useEffect(() => {
    onSearch(val)
  }, [val])

  return (
    <div className='App'>
      <Input value={val} placeholder='请输入' onChange={onChange} allowClear />
    </div>

  )
}

这时可以看到,首次进入页面,会发起 2 次查询全部的搜索数据请求,然后每次输入框更新,都会发起搜索数据的请求。

3 个自定义防抖 Hooks 的实现原理

正常来说是不是我们在 onSearch 事件,加入 debounce,就能够做到当输入操作停顿指定时间后,才发起搜索数据的请求。

这里需要注意的是要加上 useCallback,来避免重复渲染导致的延时事件重复触发问题。

将 onSearch 方法用 debounce + useCallback 封装后,可以实现防抖效果。

const onSearch = useCallback(
  debounce((val) => {
    console.log('搜索', val || '全部')
  }, 500),
  []
)
3 个自定义防抖 Hooks 的实现原理

接下来就是把防抖的逻辑按照 3 个不同的思路封装成不同的自定义 Hooks。

useDebounceFn

第一个自定义防抖 Hooks 的思路是,将上述 debounce + useCallback 封装为通用的自定义 Hooks useDebounceFn,实现一个有防抖效果的函数。

使用方式:useDebounceFn(fn1, options)

interface DebounceOptions {
  wait?: number;
}

const useDebounceFn = (fn: (...args: any) => any, options: DebounceOptions) => {
  return useCallback(debounce(fn, options.wait), [])
}

const onSearch = useDebounceFn(
  (val) => {
    console.log('搜索', val || '全部')
  },
  {
    wait500,
  }
)

useDebounce

第二个自定义防抖 Hooks 的思路是创建一个新 state,setState 用 useDebounceFn 封装,返回一个具有防抖效果的 state。

使用方式:useDebounce(state, options)

function useDebounce<T>(value: T, options: DebounceOptions{
  const [debounced, setDebounced] = useState(value)

  const update = useDebounceFn((value) => {
    setDebounced(value)
  }, options)

  useEffect(() => {
    update(value)
  }, [value])

  return debounced
}

将 useEffect 的依赖项改成 useDebounce 返回的 state,同样可以实现搜索防抖:

const debounceVal = useDebounce(val, { wait500 })
const onSearch = (val: string) => {
  console.log('搜索', val || '全部')
}

// 当 debounceVal 发生变化时,请求搜索数据
useEffect(() => {
  onSearch(debounceVal)
}, [debounceVal])

useDebounceEffect

第三个自定义防抖 Hooks 的思路是创建一个新 state,setState 用 useDebounceFn 封装,依赖更新时防抖更新 state,新 state 更新时执行副作用,这时副作用就防抖执行了,实现一个具有防抖效果的 useEffect。

使用方式:useDebounceEffect(effect, deps, options)

function useDebounceEffect(
  effect: EffectCallback,
  deps: DependencyList,
  options: DebounceOptions
{
  const [debounced, setDebounced] = useState({})

  const update = useDebounceFn(() => {
    setDebounced({})
  }, options)

  useEffect(() => {
    update()
  }, deps)

  useEffect(effect, [debounced])
}

将 useEffect 改成 useDebounceEffect,就可以实现搜索防抖:

useDebounceEffect(
    () => {
      onSearch(val)
    }
    [val],
    { wait500 }
  )

小结

大家应该比较清晰自定义防抖 Hooks 的实现思路了,可以通过这个思路给自己组件内的通用逻辑封装成通用的 Hooks 啦。

本文实现的 useDebounceFn、useDebounce、useDebounceEffect 3 种防抖 Hooks,可以直接下载 ahooks[1] 使用。

参考资料


[1]

ahooks: https://ahooks.js.org/zh-CN/hooks/use-debounce