React 自定义Hook(挂载完毕、防抖)

React 自定义Hook

重构 生命周期函数——挂载完毕

export const useMount = (callback : Function) => {
  useEffect(() => {
    callback()
  },[])
}

防抖

export const useDebounce = (value:any, delay:number) => {
  const [debouncedValue,setDebouncedValue] = useState(value)
  useEffect(() => {
    // value、delay变化以后，设置一个定时器
    const timeout = setTimeout(() => {
      setDebouncedValue(value)
    }, delay);
    return () => clearTimeout(timeout)
  },[value,delay])

  return debouncedValue
}

外部的引用

const [param, setParam] = useState({
    name:'',
    personId:''
})
const debouncedParams = useDebounce(param,2000)
useEffect(() => {
    fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(param))}`).then(async response => {
        if(response.ok){
            setList(await response.json())
        }
    })
},[debouncedParams])

注意点

命名问题

自定义Hook必须是以use开头，否则useEffect（React自带的Hook）就会报错

原因：在Eslint校验中，如果没有以use开头，就会被辨别为普通的函数，而Hook（不管是自带的Hook还是自定义的Hook）都是不可以在普通函数中运行的

运行条件：

1. 其他Hook中
2. 组件中