react 除了提供函数式组件外,还提供了类组件,类组件提供了状态属性,下面一起吧之前的函数组件转换成类组件。
/*
类组件定义
*/
class Clock extends React.Component{
render(){
return (
<div>
<h1>Hello,World</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
替换 render() 方法中的 this.props.date 为 this.state.date
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
添加类构造函数
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
经过修改之后的最终代码如下:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
这样,当调用Clock组件时,能够实现页面上的具体时刻。但是这样做还是有些问题,无法做到每秒钟都更新组件,这里不能像上一章节,直接采用setInterval(tick, 1000);的方式来进行每秒钟更新,需要使用类组件提供的生命周期函数才可以。
类的生命周期
componentDidMount() 钩子在组件输出被渲染到 DOM 之后运行。我们将计时器的设置放在生命周期函数内。
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
当Clock组件DOM被清除时需要将计时器也销毁,需要在结束生命周期函数中将该计时器销毁。
componentWillUnmount() {
clearInterval(this.timerID);
}
最后,贴出整个流程的完整代码:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
可以做到美妙都刷新DOM。