React怎么实现一个倒计时hook组件

这篇“React怎么实现一个倒计时hook组件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“React怎么实现一个倒计时hook组件”文章吧。

思路

倒计时可能需要显示剩余时间的单位有：天、时、分、秒、毫秒，可能只需显示一个，也可能都需要显示。

注意细节：

• 只显示某一单位的时间或者需要显示的最大单元时间，需要可以大于正常时间最大限制，比如要剩余 100 小时 58 分时，小时需要可以大于 23，分钟不能大于 59 。

• 需要可以设置是否显示毫秒，1s等于1000ms，但人的反应时间是0.2s～0.3s，因此毫秒以百为单位显示，显示毫秒适用于秒杀类活动场景。

实现

先来定义好参数：

export interface CountDownOptions {    deadlineTime: number;    showMillisecond?: boolean;}

参数只需要倒计时截止时间以及是否需要显示毫秒。

再定义一下需要获取的返回值：

export interface TimeInfo {    day: number;    hours: number;    hoursStr: string;    minutes: number;    minutesStr: string;    seconds: number;    secondsStr: string;    milliseconds?: number;    millisecondsStr?: string;    end: boolean;}

day 、 hours 、 minutes 、 seconds 、 milliseconds 都是剩余的多少秒数，没有做限制，hoursStr、minutesStr、secondsStr、millisecondsStr 才做限制，比如剩下 1天10小时10分钟10秒100毫秒，那么显示结果如下：

{    day,    hours,    hoursStr,    minutes,    minutesStr,    seconds,    secondsStr,    end: false,  }

下面来看具体实现代码。

先实现一个简单的补零函数，JS字符串本身也有补零函数，也可以直接使用的，不过也需要转换类型。

// 格式化数据，这里就是补零function formate(time: number): string {  return `${time < 10 ? "0" : ""}${time}`;}

工具方法——清除倒计时数据数据信息：

function clearCountdownInfo(showMillisecond = false): TimeInfo {  const timeInfo: TimeInfo = {    day: 0,    hours: 0,    hoursStr: "00",    minutes: 0,    minutesStr: "00",    seconds: 0,    secondsStr: "00",    end: true,  };  if (showMillisecond) {    timeInfo.milliseconds = 0;    timeInfo.millisecondsStr = "0";  }  return timeInfo;}

关键工具方法——计算倒计时返回的数据信息：

function computeCountdownInfo(  remainTime: number,  showMillisecond = false): TimeInfo {  // 剩余时间小于说明结束，直接清空  if (remainTime < 0) {    return clearCountdownInfo(showMillisecond);  }  // 这里用了一个比较笨的方法，一个个进行计算，后续可以优化试试看  const day = Math.floor(remainTime / (24 * 60 * 60));  const hours = Math.floor((remainTime / (60 * 60)) % 24);  const hoursStr = formate(hours);  const minutes = Math.floor((remainTime / 60) % 60);  const minutesStr = formate(minutes);  const seconds = Math.floor(remainTime % 60);  const secondsStr = formate(seconds);  // 组合成需要返回的时间信息  const timeInfo: TimeInfo = {    day,    hours,    hoursStr,    minutes,    minutesStr,    seconds,    secondsStr,    end: false,  };  // 需要显示毫秒逻辑处理  if (showMillisecond) {    const milliseconds = Math.floor(remainTime * 1000);    // 只取首位    const millisecondsStr = String(milliseconds).slice(-3);    timeInfo.milliseconds = milliseconds;    timeInfo.millisecondsStr = millisecondsStr;  }  return timeInfo;}

核心逻辑 —— useCountdown hook 组件：

export const useCountdown = (options: CountDownOptions) => {  // 首次初始化数据，显示清除的数据  const [timeInfo, setTimeInfo] = useState<TimeInfo>(    clearCountdownInfo(options.showMillisecond)  );  useEffect(() => {    let timer = 0;    function countdown() {      const remainTime = computeRemainTime(options.deadlineTime);      // 剩余时间大于 0 才开始倒计时      if (remainTime > 0) {        // 未结束时直接定时下一次在执行判断 countdown        timer = window.setTimeout(          countdown,          options.showMillisecond ? 100 : 1000 // 毫秒级则修改定时器时间        );      }      const data = computeCountdownInfo(remainTime, options.showMillisecond);      setTimeInfo(data);    }    // 开始倒计时    countdown();    return () => {      // 清除定时器      timer && clearInterval(timer);    };  }, [options.deadlineTime, options.showMillisecond]);  return timeInfo;};

上面需要注意一下，服务端渲染的情况不要首次进行render的时候初始化数据，会和服务端已经不一致导致 hydrate 报错。

客户端渲染的可以在render的时候初始化代码：

// 渲染时获取一次剩余时间const remainTime = useMemo(    () => computeRemainTime(options.deadlineTime),    [options.deadlineTime]);// 首次初始化数据，以防页面闪烁const [timeInfo, setTimeInfo] = useState<TimeInfo>(    computeCountdownInfo(remainTime));

以上就是关于“React怎么实现一个倒计时hook组件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。