react 中input组件防抖 自定义hook

场景： 输入过程中不希望频繁改变状态触发渲染

解决方法：

1. onBlur时间 当用户鼠标移出input才触发
2. 使用防抖函数

lodash库的_.debounce()

结合useCallback hook

const handleChange = (event: any) => {
    debounce(event.target.value);
  };

const debounce = useCallback(
    _.debounce((_searchVal: string) => {
      setDebouncedState(_searchVal);
      // send the server request here		
    }, 1000),
    []
  );

自定义hook

import { useCallback, useState } from 'react';

//定义防抖函数
const debounce = (fun, delay,immediate)=>{
    let timer = null
    let init=true
    return function(...args){
      if(init && immediate){
        fun.apply(this,args)
        init=false
      }else{
        clearTimeout(timer)
            timer=setTimeout(()=>{
                fun.apply(this,args)
                init=true
            },delay)
      }                    
   }
}

export const useDebounce = (obj=null, time=1000,immediate=true) =>{
    const [state,setState] = useState(obj)

    const _debounce = useCallback(debounce(setState,time,immediate),[])
    const setDebounceState =(value)=>{
        _debounce(value)
    }
    return [state,setDebounceState]  
}

参考： How to Debounce Props With React Hooks (nodeployfriday.com)