react入门—07react生命周期

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

效果为