今天來說明如何在 react 內執行 setTimeout 跟 setInterval

複習概念，在 react 的生命週期中提到，`componentDidMount 是寫 timer 的好地方
react 大冒險-Lifecycle method-day 19

開啟一個 Timer.js
對 state 初始化，設定 初始秒數 initTime = 0

在 componentDidMount 時設定 timeId
incrementTime 將 state.initTime 逐次+1

import React, { Component } from "react";
class Timer extends Component {
	constructor(props) {
		super(props);
		this.state = {
			initTime: 0,
		};
		this.incrementTime = this.incrementTime.bind(this);
		this.stopCounting = this.stopCounting.bind(this);
	}
	// componentDidMount 是設定timer的好地方
	componentDidMount() {
		this.timeId = setInterval(() => {
			this.incrementTime();
		}, 1000);
	}
	incrementTime() {
		this.setState({ initTime: this.state.initTime + 1 });
	}
	stopCounting() {
		clearInterval(this.timeId);
	}

	render() {
		const { initTime } = this.state;
		return (
			<>
				<button onClick={this.stopCounting}>stop counting</button>
				<p>passed {initTime} seconds</p>
			</>
		);
	}
}

export default Timer;

這時候就可以看到隨時間經過，畫面便會產生變化