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

最后

以上就是机灵乌龟为你收集整理的React Hook 写 Timer时钟的全部内容，希望文章能够帮你解决React Hook 写 Timer时钟所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。