平时工作偶尔用到的一些 自己封装的逻辑 我也会记录下来 希望对大家实际开发有些帮助

 下面我会用一个例子帮助大家使用我封装的这个自定义hooks

import { useState, useEffect, useRef } from 'react'
// 第一参数为你定时的数字
// 第二参数为你定时结束时想做的事
// 返回的第一参数为可变值
// 返回第二参数为触发函数
export function useTimer (Num, callBack = () => {}) {
  const [num, setNum] = useState(Num)
  const ref = useRef(null)
  // 调用这个方法,开始倒数
  const start = () => {
    setNum(Num) // 重新赋值
  // 定时器
    ref.current = setInterval(() => {
      setNum((num) => num - 1)
    }, 1000)
  }
  // 倒数为0 关闭定时器
  useEffect(
    () => {
      if (num === 0) {
        return () => {
          clearInterval(ref.current) // 关闭定时器
          callBack() // 自己想做的事
        }
      }
    },
    [num]
  )

  // 解决当正在计数的组件开始倒数 删除组件导致无法取消定时器
  useEffect(() => {
    return () => {
      clearInterval(ref.current)
    }
  }, [])
  // 返回可变值 与 触发函数
  return {
    num, // 可变值
    start // 触发函数
  }
}

需求 : 点击一个按钮 按钮禁用 过五秒回复

第一步: 搭建基础结构

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

export default function App () {
  
  const [IsShow, setIsShow] = useState(true)

  const isShow = () => {
    setIsShow(false)
  }

  return (
    <div>
      <button disabled={!IsShow} onClick={isShow}>
        {IsShow ? '显示' : '还有' + '可变值'+'秒恢复'}
      </button>
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

第二步 导入引用 

import { useTimer } from './userDefined'

第三步 分析

点击按钮需要禁用过五秒恢复,

所以第一参数为需求五秒,第二参数为按钮恢复也就是设置setIsShow(true)

const { num, start } = useTimer(5, () => {
    setIsShow(true)
  })

返回值我们会拿到可变值以及触发函数,在点击时触发,所以在点击事件中我们调用这个触发函数

 const isShow = () => {
    setIsShow(false)
    start()
  }

完整写法

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { useTimer } from './userDefined'

export default function App () {
  const { num, start } = useTimer(5, () => {
    setIsShow(true)
  })

  const [IsShow, setIsShow] = useState(true)

  const isShow = () => {
    setIsShow(false)
    start()
  }

  return (
    <div>
      <button disabled={!IsShow} onClick={isShow}>
        {IsShow ? '显示' : '还有' + num + '秒恢复'}
      </button>
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))