React学习笔记（五）封装时钟

//封装时钟
//原时钟代码
function Clock(clock) {
    return (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {clock.date.toLocaleTimeString()}.</h2>
        </div>
    );
}

function tick() {
    ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);


//将函数转换为类
//创建一个名称拓展为React.Component的ES6类
class Clock extends React.Component{
    //添加一个类构造函数来初始化状态this.state
    constructor(clock){
        //noinspection JSAnnotator
        super(clock)
        this.state = {date:new Date()}
    }
    //生命周期钩子
    //每当Clock组件第一次加载到DOM中的时候，我们都想生成定时器，这在React中被称为挂载
    componentDidMount(){
        this.timerID = setInterval(
            () => this.tick(),
            1000
        )
    }
    //同样，每当Clock生成的这个DOM被移除的时候，我们也会想要清除定时器，这在React中被称为卸载。
    componentWillUnMount(){
        clearInterval(this.timerID)
    }
    tick(){
        //setState更新组件局部状态
        this.setState({
            date:new Date()
        })
    }
    //创建一个叫做render()的方法
    render(){
        //将函数体写入到render()方法中
        return(
            // 在render()方法中，使用this.clock替换clock,删除剩余的空函数声明
            <div>
                <h1>hello,world</h1>
                {/*<h2>现在是{this.clock.date.toLocaleString()}</h2>*/}
                {/*在render()方法中使用this.state.date替代this.clock.date*/}
                <h2>现在是{this.state.date.toLocaleString()}</h2>
            </div>
        )
    }
}
ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
)