React展示当前时间

import React from 'react'
class ClockG extends React.Component{
    constructor(){
        super()
        this.state={ //局部状态
            timer:new Date().toLocaleTimeString()
        }
    }
    componentDidMount(){ //组件的生命周期，此处虚拟dom渲染成了真实dom
        // 相当于vue里面的mounted，小程序里面的onReady
        this.tick()
    }
    componentWillUnmount(){ //组件即将卸载
        // 相当于vue中的beforeDestory
        clearInterval(this.inderver)
    }
    tick(){
        // 更新时间，==>也就是说要更新state的状态
        // 小程序里面如何更新状态？setDate
        // react 中更新状态，setState,传递一个新的值
        this.inderver = setInterval(()=>{
            this.setState({
                timer:new Date().toLocaleTimeString()
            })
        },300)
    }
    render(){ //这是react生命周期中的一个钩子函数,这里会进行diff算法和更新虚拟dom
        // 视图如果要更新，必须要调用render方法
        return(
            <fieldset>
                <legend>时间在流逝</legend>
                <h1>现在是北京时间：{this.state.timer}</h1>
            </fieldset>
        )
    }
}
export default ClockG

然后在index.js中引入即可