react-Hook倒计时hook

最新推荐文章于 2024-08-16 08:28:03 发布

BUG不加糖

最新推荐文章于 2024-08-16 08:28:03 发布

阅读量1.4k

点赞数 2

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/yx0711/article/details/131142940

版权

文章介绍了一种在React应用中封装自定义Hook的方法，用于实现60秒验证码发送倒计时功能。Hook包括开始、当前倒计时和禁用状态等属性，并在倒计时结束时重置。使用示例展示了如何在组件中调用此Hook。

摘要由CSDN通过智能技术生成

我们平常注册账号的时候会有发送验证码的需求，为了减少过多的请求，我们一般限制60s发一次，这个需求也很平常，但在react中之前我并没有写过，就简单的研究了一下，把该需求封装成了一个hook

代码

import { useCallback, useEffect, useRef, useState } from "react";
//initCount是倒计时时长，默认是10s，callBack是开始执行的回调函数，endBack是结束时执行的函数
export function useCountDown(
  initCount = 10,
  callBack = () => {},
  endBack = () => {}
) {
//初始化定时器id
  const timeId = useRef<{ id: number }>({ id: 0 });
  //初始化倒计时
  const [count, setCount] = useState(initCount);
  //初始化是否禁用
  const [isdisable, setIsdisable] = useState(false);
  //开始,执行该函数之后会开启倒计时
  const start = () => {
    setCount(initCount);
    setIsdisable(true);
    timeId.current.id = window.setInterval(() => {
      setCount((count) => count - 1);
    }, 1000);
  };
  //   首先清除定时器
  useEffect(() => window.clearInterval(timeId.current.id), []);
  //   判断是否需要清除
  useEffect(() => {
    if (count !== initCount || isdisable) {
      callBack();
    }
    if (count === 0) {
      clearInterval(timeId.current.id);
      setCount(initCount);
      endBack();
      setIsdisable(false);
    }
  }, [callBack, count, initCount, endBack, isdisable]);
  //对外暴露三个属性，开始执行函数，当前倒计时时间，是否禁用
  return { start, count, isdisable };
}

使用

import React, { useState } from 'react'
import { useCountDown } from '../../hooks/utils';
import { Button } from 'antd';

export default function text() {
    const [codeMessage, setCodeMessage] = useState("获取验证码");
    const { start, count, isdisable } = useCountDown(
        60,
        () => {
            setCodeMessage(`${count}s后重新获取`);
        },
        () => {
            setCodeMessage("获取验证码");
        }
    );
    function getCode() {
        start();
    }
    return (
        <div>
            <Button
                onClick={getCode}
                disabled={isdisable}
                style={{ marginLeft: "10px" }}
            >
                {codeMessage}
            </Button>
        </div>
    )
}

以上就是我封装的倒计时hook。