目錄

• 前言
• 思路
• 實(shí)現(xiàn)
• 總結(jié)

前言

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

思路

倒計(jì)時(shí)可能需要顯示剩余時(shí)間的單位有：天、時(shí)、分、秒、毫秒，可能只需顯示一個(gè)，也可能都需要顯示。

注意細(xì)節(jié)：

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

實(shí)現(xiàn)

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

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

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

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

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

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

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

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

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

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

工具方法——清除倒計(jì)時(shí)數(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)鍵工具方法——計(jì)算倒計(jì)時(shí)返回的數(shù)據(jù)信息：

function computeCountdownInfo(  remainTime: number,  showMillisecond = false): TimeInfo {  // 剩余時(shí)間小于說明結(jié)束，直接清空  if (remainTime < 0) {    return clearCountdownInfo(showMillisecond);  }  // 這里用了一個(gè)比較笨的方法，一個(gè)個(gè)進(jìn)行計(jì)算，后續(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);  // 組合成需要返回的時(shí)間信息  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);      // 剩余時(shí)間大于 0 才開始倒計(jì)時(shí)      if (remainTime > 0) {// 未結(jié)束時(shí)直接定時(shí)下一次在執(zhí)行判斷 countdowntimer = window.setTimeout(  countdown,  options.showMillisecond ? 100 : 1000 // 毫秒級(jí)則修改定時(shí)器時(shí)間);      }      const data = computeCountdownInfo(remainTime, options.showMillisecond);      setTimeInfo(data);    }    // 開始倒計(jì)時(shí)    countdown();    return () => {      // 清除定時(shí)器      timer && clearInterval(timer);    };  }, [options.deadlineTime, options.showMillisecond]);  return timeInfo;};

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

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

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

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

總結(jié)

從梳理需要實(shí)現(xiàn)的效果，然后再來實(shí)現(xiàn)具體的內(nèi)容，邏輯的清晰可以讓代碼寫得更好，這個(gè)倒計(jì)時(shí)組件也是我?guī)啄昵皩懙囊粋€(gè)組件了，但原本代碼比較復(fù)雜一些，簡化了很多代碼，重新進(jìn)行了邏輯調(diào)整和優(yōu)化。

以上就是React實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)hook組件的詳細(xì)內(nèi)容，更多關(guān)于React倒計(jì)時(shí)hook組件的資料請(qǐng)關(guān)注其它相關(guān)文章！