react入门—07react生命周期

最新推荐文章于 2025-05-21 08:45:00 发布

jiaojsun

最新推荐文章于 2025-05-21 08:45:00 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： React入门

本文链接：https://blog.youkuaiyun.com/jiaojsun/article/details/86774885

React入门专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用React构建一个实时更新的数字时钟组件。通过定时器和React生命周期方法，实现每三秒更新一次时间显示。文章涵盖组件状态管理、定时器设置及清除，以及如何在页面上正确展示当前时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简介

2.实例

新建一个js引入

DigitalClock.js中的内容为

import React from 'react'
class DigitalClock extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            date: new Date()
        }
    }
    // 创建
    componentDidMount(){
        this.timer = setInterval(()=>{
            this.setState({
                date: new Date()
            })
        },3000)
    }
    // 更新
    componentDidUpdate(currentProps, currentState){
        console.log(currentState);
    }
    // 卸载
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    render(){
        return(
            <div className="digital-clock-component jumbotron">
                <h1>{this.state.date.toLocaleTimeString()}</h1>
            </div>
        )
    }
}
export default DigitalClock

效果为