//封装时钟 //原时钟代码 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') )
React学习笔记(五)封装时钟
最新推荐文章于 2022-08-11 14:02:28 发布