快捷導航

React實現(xiàn)一個倒計時hook組件實戰(zhàn)示例

更新時間：2023年02月23日 08:33:44 作者：Hutao

這篇文章主要為大家介紹了React實現(xiàn)一個倒計時hook組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

本篇文章主要實現(xiàn)一個無樣式的倒計時 hook 組件，通常不同地方的倒計時樣式都不同，但倒計時的邏輯基本是都是一樣的，因此可以抽離成一個工具方法或者一個 hook 組件，這樣讓倒計時邏輯可以進行通用，樣式讓業(yè)務(wù)方具體去實現(xiàn)。

思路

倒計時可能需要顯示剩余時間的單位有：天、時、分、秒、毫秒，可能只需顯示一個，也可能都需要顯示。

注意細節(jié)：

只顯示某一單位的時間或者需要顯示的最大單元時間，需要可以大于正常時間最大限制，比如要剩余 100 小時 58 分時，小時需要可以大于 23，分鐘不能大于 59 。
需要可以設(shè)置是否顯示毫秒，1s等于1000ms，但人的反應(yīng)時間是0.2s～0.3s，因此毫秒以百為單位顯示，顯示毫秒適用于秒殺類活動場景。

實現(xiàn)

先來定義好參數(shù)：

export interface CountDownOptions {
  /** 截止時間，時間戳 */
  deadlineTime: number;
  /** 是否需要毫秒 */
  showMillisecond?: boolean;
}

參數(shù)只需要倒計時截止時間以及是否需要顯示毫秒。

再定義一下需要獲取的返回值：

export interface TimeInfo {
  /** 天 */
  day: number;
  /** 小時 */
  hours: number;
  /** 補零后的小時 */
  hoursStr: string;
  /** 分鐘 */
  minutes: number;
  /** 補零后的分 */
  minutesStr: string;
  /** 秒 */
  seconds: number;
  /** 補零后的秒 */
  secondsStr: string;
  /** 毫秒 */
  milliseconds?: number;
  /** 補零后的毫秒 */
  millisecondsStr?: string;
  /** 是否結(jié)束 */
  end: boolean;
}

day 、 hours 、 minutes 、 seconds 、 milliseconds 都是剩余的多少秒數(shù)，沒有做限制，hoursStr、minutesStr、secondsStr、millisecondsStr 才做限制，比如剩下 1天10小時10分鐘10秒100毫秒，那么顯示結(jié)果如下：

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

下面來看具體實現(xiàn)代碼。

先實現(xiàn)一個簡單的補零函數(shù)，JS字符串本身也有補零函數(shù)，也可以直接使用的，不過也需要轉(zhuǎn)換類型。

// 格式化數(shù)據(jù)，這里就是補零
function formate(time: number): string {
  return `${time &lt; 10 ? "0" : ""}${time}`;
}

工具方法——清除倒計時數(shù)據(jù)數(shù)據(jù)信息：

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;
}

關(guān)鍵工具方法——計算倒計時返回的數(shù)據(jù)信息：

function computeCountdownInfo(
  remainTime: number,
  showMillisecond = false
): TimeInfo {
  // 剩余時間小于說明結(jié)束，直接清空
  if (remainTime < 0) {
    return clearCountdownInfo(showMillisecond);
  }
  // 這里用了一個比較笨的方法，一個個進行計算，后續(xù)可以優(yōu)化試試看
  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) => {
  // 首次初始化數(shù)據(jù)，顯示清除的數(shù)據(jù)
  const [timeInfo, setTimeInfo] = useState<TimeInfo>(
    clearCountdownInfo(options.showMillisecond)
  );
  useEffect(() => {
    let timer = 0;
    function countdown() {
      const remainTime = computeRemainTime(options.deadlineTime);
      // 剩余時間大于 0 才開始倒計時
      if (remainTime > 0) {
        // 未結(jié)束時直接定時下一次在執(zhí)行判斷 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;
};

上面需要注意一下，服務(wù)端渲染的情況不要首次進行render的時候初始化數(shù)據(jù)，會和服務(wù)端已經(jīng)不一致導致 hydrate 報錯。

客戶端渲染的可以在render的時候初始化代碼：

// 渲染時獲取一次剩余時間
const remainTime = useMemo(
    () => computeRemainTime(options.deadlineTime),
    [options.deadlineTime]
);
// 首次初始化數(shù)據(jù)，以防頁面閃爍
const [timeInfo, setTimeInfo] = useState<TimeInfo>(
    computeCountdownInfo(remainTime)
);

一個完整的倒計時組件已經(jīng)完成，我們來看一下效果（gif有點奇怪，倒計時結(jié)束時等一會gif才重置導致的異常）：