ComponentDidMount异常行为

Question

我正在浏览react文档，它显示了时钟计时器的实现。当组件被挂载时，componentDidMount方法被调用，因此它内部的setInterval被执行，所以在1秒后状态改变，时钟组件被重新渲染。我很好，直到这一点，但如何再次调用senInterval函数?因为componentDidMount只被调用一次，所以它的状态是如何在每一秒钟被设置的，请解释一下这里发生了什么。

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')
);

Answer 1

setInterval()方法以指定的间隔(毫秒)调用函数或计算表达式

这就是setInterval所做的。它可以用来在一定的时间间隔内重复一些任务。如果您只想执行一次，请使用setTimeout()。

setInterval
setTimeout

Answer 2

setInterval是一个函数，它每隔一段时间(在本例中为1秒)调用自己。componentDidMount的作用是在组件挂载后执行其中的代码一次。

在这个例子中，componentDidMount调用了一次setInterval setInterval每1秒调用一次，直到你在componentWillUnmount中清除它。