react基础--官网数字时钟

Lifecycle.js

//时钟：生命周期钩子：componentDidMount():组件第一次加载到DOM中的时候执行，componentWillUnmount():DOM被移除的时候执行
import React from "react";
import "../css/style1.css";

class Lifecycle extends React.Component{
    constructor() {
        super();
        this.state = {
            date: new Date()
        };
    }

    componentDidMount() {
        this.timer = setInterval(()=>this.tick(),1000)
    }

    componentWillUnmount() {
        clearInterval(timer);
    }

    tick() {
        this.setState({
            date : new Date()
        })
    }

    render() {
        return (
            <div className="clock_wrap">
                <p className="clock_num">{this.state.date.toLocaleTimeString()}</p>
            </div>
        )
    }
}

export default Lifecycle;