前言

开发中经常遇到页面上需要展示倒计时的需求，比如: 活动开始倒计时，领奖倒计时等等。所以就有了这个hooks，复制粘贴就能用。

代码实现

const getReturnValues = (countDown) => {
  const days = Math.floor(countDown / (1000 * 60 * 60 * 24))
  const hours = Math.floor(
    (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
  )
  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60))
  const seconds = Math.floor((countDown % (1000 * 60)) / 1000)

  return [
    days,
    hours,
    minutes,
    seconds,
  ]
}

export function useCountdown(endTime: Date | string) {
  const countDownDate = new Date(endTime).getTime()

  const [countDown, setCountDown] = useState(
    countDownDate - new Date().getTime(),
  )

  useEffect(() => {
    const interval = setInterval(() => {
      setCountDown(countDownDate - new Date().getTime())
    }, 1000)

    return () => clearInterval(interval)

  }, [countDownDate])

  if (!endTime) {
    return {
      isExpired: true,
      data: [0, 0, 0, 0],
    }
  }
  return {
    isExpired: countDown <= 0,
    data: getReturnValues(countDown),
  }
}

使用方法

function FcComponent () {
   const {
    data: values,
    isExpired: isCountdownExpired,
  } = useCountdown(data.awardExpireTime!)
   
   const [ days, hours, minutes, seconds ] = values
   
   useEffect(
   	 () => {
       if (!isCountdownExpired) {
	       console.log(days, hours, minutes, seconds)         
       } else {
  			 console.log('已过期')       
       }
     },
     [days, hours, minutes, seconds],
   )
}