React Hook 写 Timer时钟

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

 

const Timer = ({options}) => {

const [date, setDate] = useState(new Date())

 

useEffect(() => {

const tick = () => setDate(new Date())

const timerId = setTimeout(tick, 1000)

// 返回一个清除函数， 清除函数会在组件卸载前执行，执行当前effect前对上一个effect进行清除

return () => clearTimeout(timerId)

}, [date])

 

return <div style={{fontSize: fontSize * baseFontSize, right: 0}} className="pa">{getDate(date)}</div>

}

 

// 判断日期是否是个位数

const getDateRestult = str => {

if (str < 10) {

return `0${str}`

}

return str

}

// 获得日期

const getDate = str => {

if (str != null) {

const time = new Date(parseInt(Date.parse(str)))

// 年

const year = getDateRestult(time.getFullYear())

// 月

const month = getDateRestult(time.getMonth() + 1)

// 日

const day = getDateRestult(time.getDate())

// 时

const hours = getDateRestult(time.getHours())

// 分

const Minutes = getDateRestult(time.getMinutes())

// 秒

const seconds = getDateRestult(time.getSeconds())

 

const resultTime = `${year}/${month}/${day} ${hours}:${Minutes}:${seconds}`

return resultTime

}

}

 

export default Timer