本来是 freeCodeCamp 上的练手项目 25 + 5 clock，嫌麻烦就自己改成了倒计时。
倒计时很简单：页面上有默认时间，点击开始，从秒针开始回倒，秒针退至 0 时，分针回倒 1。点击停止，倒计时停止。
拿到这道题，最初的难点是怎么让分针和时针分别动，后来想到的是用两个 state 来分别表示。
第二个难点是如何让数字动起来，js 里有 setInterval 可以用来重复函数，不过一开始我是把这个函数挂在 render 上，总是出错，后来还是在 render 前建了一个函数才可以。
除了 setInterval 放置的位置，它的好基友 clearInterval 怎么生效也让我犯愁，这个函数要求接收一个停止信号，但是我之前没看过 react 上要怎么搞，Google 了一下，stackflow 里有个答案是说在函数内部去建信号（语言说不清，下面有源码）。尝试着搞了下，结果可以！
第三个难点，是当时针倒退回 0 时，怎么让分针减，而时针重新回到 60 。想了一下决定在状态里用条件函数。因为之前用状态时都直接赋值，没有搞条件，一开始还有些惴惴不安，试了一下，竟然可以。
这三点ok 后，基本上就没有太大的问题了。当然有一些边界值啥的都没有完善。做这个也只为了练习思路。
贴下源码：
class Clock extends React.Component{
constructor(props){
super(props)
this.state={
minute:60,
second:60
}
this.start = this.start.bind(this)
this.no = this.no.bind(this)
this.end = this.end.bind(this)
}
start(){
if(this.state.second>0){
this.setState({
minute:this.state.minute,
second:this.state.second - 1
})
}
else{
this.setState({
minute:this.state.minute - 1,
second:this.state.second + 60
})
}
}
no(){
this.id = setInterval(this.start,1000)
}
end(){
clearInterval(this.id)
}
render(){
return(
<div>
<div id="container">
{this.state.minute} : {this.state.second}
</div>
<button onClick={this.no}>
start
</button>
<button onClick={this.end}>
end
</button>
</div>
)}
}
ReactDOM.render(
<Clock/>,
document.getElementById("root")
)
