简单的hook封装及应用

hook 对于使用react的开发工作者来说不会很陌生，如何自己封装一些简单的hook 去提高项目的的复用率，减少开发成本呢，让我们一起来学习一下几个简单的hook吧

一、作用介绍

hook 的作用

1. 可以对一些功能组件重复逻辑进行封装
2. 分离组件并将其功能细化
3. 逻辑共享变的更容易，减少了代码的重复性，维护和更新变的更简单易懂

hook 的本质

hook 的本质就是让组件不再使用 类组件，所以，如果项目还在使用react的类函数方式，是不能使用hook的

react、umi等都有自己内置的hook、比如react 常用的hook: useState、useEffect

二、封装一个状态管理hook: useToggle

useToggle

import { useState } from "react"

export default function useToggle(initValue) {
  const [value, setValue] = useState(initValue)

  function toggleValue(value) {
    setValue(currentValue =>
      typeof value === "boolean" ? value : !currentValue
    )
  }

  return [value, toggleValue]
}

该hook的作用本质就是进行状态切换，可以将其理解成一个 react 组件

，也可以将其理解成一个函数，这个函数接受一个初始值，用**useState**进行状态存储，通过toggleValue进行状态切换，组件一般返回一段jsx代码，这里返回的是一个数组。

使用：

export default function ToggleRFC() {
  const [value, toggleValue] = useToggle(false)

  return (
    <div>
      <div>{value.toString()}</div>
      <button onClick={toggleValue}>Toggle</button>
      <button onClick={() => toggleValue(true)}>Feico True</button>
      <button onClick={() => toggleValue(false)}>Feico False</button>
    </div>
  )
}

三、封装一个防抖管理hook: useDebounce

对 useTimeout 进一步进行封装，可以实现 debounce 的操作，主要目的是为了解决某个方法在指定时间内重复调用，用 hook 的方式可以很方便的解决这种问题

export default function useDebounce(callback, delay, dependencies) {
  const { reset, clear } = useTimeout(callback, delay)
  useEffect(reset, [...dependencies, reset])
  useEffect(clear, [])
}

其中通过 dependencies 的变化可以控制 reset，控制执行的频率

const [count, setCount] = useState(10)
useDebounce(() => alert(count), 1000, [count])

count 在 1s 之内变化频繁的话，是不会触发 alert 的，当然也可以通过一个是否立即执行的参数进行一些相应的控制，这里就不提了，有兴趣的可以自主完善一下

四、封装一个延迟执行函数hook:useTimeout

import { useCallback, useEffect, useRef } from "react"

export default function useTimeout(callback, delay) {
  const callbackRef = useRef(callback)
  const timeoutRef = useRef()

  useEffect(() => {
    callbackRef.current = callback
  }, [callback])

  const set = useCallback(() => {
    timeoutRef.current = setTimeout(() => callbackRef.current(), delay)
  }, [delay])

  const clear = useCallback(() => {
    timeoutRef.current && clearTimeout(timeoutRef.current)
  }, [])

  useEffect(() => {
    set()
    return clear
  }, [delay, set, clear])

  const reset = useCallback(() => {
    clear()
    set()
  }, [clear, set])

  return { reset, clear }
}

这个 hook 本质就是延迟多长时间执行 callback 函数，对外暴露了两个方法，分别是重置 reset 和 clear 清除定时器，可以更方便进行定时器操作，使用 ref 保存定时器和回调函数

使用方式

const { clear, reset } = useTimeout(() => setCount(0), 1000)

通过按钮点击或者函数调用来对定时器进行操作

总结：

封装hook可以理解为把一些常用的原生的hook或者一些函数的再次封装，结合state或者effect将一些逻辑提取，让页面变得更简单，更专注与页面本身自己的逻辑