react 大冒险-setTimeout setInterval in react -day 24

今天来说明如何在 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;

这时候就可以看到随时间经过，画面便会产生变化