如何自己手写一个React的有倒计时功能的hook？

如何自己封装一个有倒计时功能的hook？

代码如下：

import React, {useState, useEffect, useRef} from 'react'

export const useCountDown = () => {
/* 
  基本思路：
  1. 写一个定时器
  2. 提供方法   -  可以直接调用，然后开启定时器
  3. 清除定时器
  4. 设置节流
  5. 设置文本的状态
*/
  // 定义倒计时的数量
  var [count, setCount] = useState(0)
  // 定义节流的开关
  var [flag, setFlag] = useState(false)
  var timeId = useRef(null)
  var [timeText, setTimeText] = useState('')
  // 调用 hooks  -- 销毁组件时
  useEffect(()=> {
    // 清除副作用
    return ()=> {
      clearInterval(timeId.current)
    }
    // 这里的依赖项是[],表示只执行一次
  }, [])
  // 关闭定时器
  useEffect(()=> {
    // 进行判断：如果 = 0，说明时间走完了。 就停止定时器
    if (count ===0) {
      // 清除定时器
      clearInterval(timeId.current)
      // 把开关设置为 false
       setFlag(false)
      //  修改按钮的文字
      setTimeText('获取验证码')
    } else {
      setTimeText((count-1) + 's之后获取验证码')
    }
    // 第二个参数是具体的值， 当这个值发生改变的时候，就会触发
    // 这里依赖的是count，count每发生一次改变，就触发一次
  }, [count])
  // 定义开启的方法
  const  start = () => {
    // 判断：如果开关是 false， 表示不能点击， 是true，才能点击
    // 开关默认是 false，直接不用执行跟后面的代码
    if (flag) return
    // 能走到这里，说明开关是开的，这里就需要关闭开关
    // 在这里关闭时错误的，因为上面有一个判断，他不会走这个
    // setFlag(false)
    setCount(10)
    timeId.current = setInterval(()=> {
      // 在这里开启开关
      setFlag(true)
      setCount((count)=> {
        // count  -- 这里需要把参数传进来， 不然获取到的是旧值
        console.log(count);
        return count -1
      })
    }, 1000)
  }
  // 返回数据和方法：
  // start：开启倒计时的方法
  // count: 倒计时的数字
  // flag：节流的开关
  // timeText：倒计时的文字
  return {start, count, flag, timeText}
}

最后

以上就是细心冬瓜为你收集整理的如何自己手写一个React的有倒计时功能的hook？的全部内容，希望文章能够帮你解决如何自己手写一个React的有倒计时功能的hook？所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。