react hooks 實現一個計時器

react hooks 實現一個計時器

• endTime對應服務端返回的時間

  import React, { useState, useEffect } from 'react'

  const completionFunc = value => {
    if(String(value).length === 1) return `0${value}`
    return value
  }

  function Timer() {
    const [remainTime, setTime] = useState(null)

    useEffect(() => {
      const endTime = 1603165442000
      const time = endTime ? endTime > new Date().getTime() ? endTime - new Date().getTime() : 0 : 0
      const timer = setTimeout(() => {
        setTime(time)
      }, 1000)
      return () => {
        clearInterval(timer)
      }
    }, [remainTime])

    const remainHour = parseInt(remainTime / (60 * 60000)) || '00'
    const remainMinutes = parseInt((remainTime % (60 * 60000)) / 60000) || '00'
    const remainSeconds = parseInt((remainTime % 60000) / 1000) || '00'

    return (
      <h3>{completionFunc(remainHour)}:{completionFunc(remainMinutes)}:{completionFunc(remainSeconds)}</h3>
    )
  }

  export default Timer

github查看更多好文：https://github.com/xccjk/x-blog