React+Typescriptはカウントダウンフックメソッドを実装します

'react' から { useEffect, useRef } をインポートします。

/**
 * interTerval フック コンポーネント* @param fn 実行関数* @param 遅延時間* @param オプション 即時 true の場合、fn 関数をすぐに実行し、タイマーを実行します*/
関数useInterval(
  fn: () => void、
  遅延: 数値 | null | 未定義、
  オプション?: {
    即時?: ブール値
  }
）： 空所 {
  const 即時 = オプション?.即時
  定数タイマーRef = useRef<() => void>()

  タイマー参照.current = fn

  使用効果(() => {
    遅延 === 未定義 || 遅延 === null の場合 {
      戻る
    }
    if (即時) {
      タイマーRef.current?.()
    }
    定数タイマー = setInterval(() => {
      タイマーRef.current?.()
    }、 遅れ）
    戻り値 () => {
      クリアインターバル(タイマー)
    }
  }、 [遅れ]）
}

デフォルトの useInterval をエクスポートする

'react' から { useState、useEffect、useRef、useMemo } をインポートします。
'./' から { useInterval } をインポートします

インターフェースITime{
  /** 現在の時刻 */
  現在の時刻?: 数値
  /** 終了時間 */
  終了時間?: 数値
  /** 別の方法として、現在の時刻と終了時刻を渡す代わりに、時間差を直接渡す*/
  異なる時間?: 数値
}

インターフェース ICbTime {
  d: 番号
  h: 数値
  m: 数字
  s: 番号
}

/**
 * カウントダウンフック
 * @param options 時間オブジェクト* @param cb カウントダウンが完了したときに実行されるコールバック関数* @param noImmediate 渡された時間がコールバック実行条件を満たしたときにすぐにコールバックを実行するかどうか。デフォルトは false*/
関数useCountDown(
  オプション: ITime、
  cb?: () => 無効、
  即時でない?: ブール値
): ICbTime {
  const { currentTime = 0, endTime = 0, differentTime = 0 } = オプション
  定数[diffTime, setDiffTime] = useState(0)
  /** コンポーネントがパラメータを受け取った時間*/
  const entryTime = useRef<数値>(0)
  /** 現在のカウントダウンに必要な時間差*/
  const maxTime = useRef<数値>(0)
  /** コールバックを実行することは可能ですか? */
  定数isImplementCb = useRef(false)

  使用効果(() => {
    （！isImplementCb.current）の場合{
      isImplementCb.current = true
    }
    ((現在の時刻 > 0 && 終了時刻 > 0) || 異なる時刻 > 0) の場合 {
      entryTime.current = 新しいDate().getTime()
      maxTime.current = 異なる時間 > 0 ? 異なる時間: 終了時間 - 現在の時間
      （maxTime.current <= 0 && noImmediate）の場合{
        isImplementCb.current = false
      }
      setDiffTime(maxTime.current)
    }
  }, [現在の時刻、終了時刻、異なる時刻])

  使用間隔(
    () => {
      const curtTimes = 新しい Date().getTime()
      定数 TimeDifference = curtTimes - entryTime.current
      setDiffTime(maxTime.current - 時間差)
    },
    diffTime <= 0 ? null : 1000
  ）

  定数timeObj = useMemo(() => {
    定数時間 = diffTime > 0 ? diffTime / 1000 : 0
    定数d = Math.floor(時間/(24 * 60 * 60))
    定数h = Math.floor((時間/(60 * 60)) % 24)
    定数m = Math.floor((時間/60)%60)
    const s = Math.ceil(時間 % 60)

    diffTime <= 0 の場合、isImplementCb.current になります。
      /**
       * setTimeout は、React エラー問題を解決するために使用されます。
       * 既存の状態遷移中（`render` 内など）は更新されません。
       * レンダリング メソッドは、props と state の純粋な関数である必要があります。
       */
      タイムアウトを設定する(() => {
        cb?.()
      }, 0)
    }
    {d,h,m,s}を返す
  }, [差分時間])

  timeObj を返す || ({} を ICbTime として)
}

エクスポートデフォルトuseCountDown

  定数TimeArea = () => {
    定数d、h、m、s } = useCountDown(
      {
        現在の時刻: 1631262176333、
        終了時間: 1831062176333
      },
      () => {
        アラート('カウントダウン終了')
      }
    ）
    戻る （
      <div スタイル = {{ 幅: '200px', 高さ: '200px' }}>
        タスク終了まであと {d} 日<i>{h < 10 ? '0' + h : h}</i>:
        <i>{m < 10 ? '0' + m : m}</i>:<i>{s < 10 ? '0' + s : s}</i>
      </div>
    ）
  }