React实时显示当前时间

原创已于 2023-02-03 17:15:44 修改 · 2.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React

当前文章被收录于：

React

7 篇文章 0 人学习

订阅专栏查看详情

TypeScript

当前文章被收录于：

TypeScript

6 篇文章 0 人学习

订阅专栏查看详情

AntDesign

当前文章被收录于：

AntDesign

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2023-02-03 17:04:42 首次发布

该代码示例展示了一个使用ReactHooks创建的时间组件，它每秒更新一次显示的日期和时间，并且在组件卸载时清除定时器。

const TimeComponent：React.FC()=>{
    const [timer,setTimer] = useState<any>('')  
    const [refresh,setRefresh] = useState<number>(0)    

    useEffect(()=>{
        const timeoutId = setTimeout(()=>{
            setRefresh((r)=>r +1);
            setTimer(momemt(new Date().getTime()).format('YYYY年MM月DD日 HH时mm分ss秒'))
`        },1000)

        return()=>{
            clearTimeout(timeoutId)
        }
    },[refresh])


  return (
        <>
            {timer}
        </>
    )

}

效果图