大家好，今天我们将通过一个实例——番茄计时器，学习下如何使用函数生命周期的一个重要函数componentDidMount()：在组件加载完成， render之后进行调用，只会执行一次。
番茄工作法
在介绍前我们首先了解下什么是番茄工作法，有利于我们完成这个实例，番茄工作法是简单易行的[时间管理]方法，使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在纸上画一个X短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。关于详细的介绍可以查看百度百科。
首先看看番茄计时器长啥样
下图就是我们要制作的简易番茄计时器，默认计时器为25分钟，界面上有三个按钮，分别是工作、短时间休息、长时间休息，用来启动任务计时器。
创建番茄计时器
1、基于前面几节我们创建的项目，我们在 component 文件夹内新建一个 Pomodaro 的文件夹，然后新建 Timer.js 和 Timer.css 两个文件，首先我们来看看 Timer.js 文件的基本结构，示例代码如下：
-
import React, { Component } from
'react';
-
import
'./Timer.css';
-
-
class Timer extends Component {
-
constructor() {
-
super();
-
}
-
-
componentDidMount() {
-
-
}
-
-
render() {
-
return (
-
<div className=
"Pomodoro">
-
-
</div>
-
);
-
}
-
}
-
-
export
default Timer;
-
-
// File: src/components/Pomodoro/Timer.js
2、接下来，我们需要在构造函数方法里 constructor() 初始化我们本地数据状态，在这里我们初始化当前时间 time 和 alert（当任务时间到了，系统的提醒信息） 这两个值，同时初始化一些常量设置，比如工作时间 defaultTime、短暂休息时间 shortBreak 、长时间休息 longBreak，其示例代码如下 ：
-
constructor() {
-
super();
-
-
// Initial State
-
this.state = {
-
alert: {
-
type:
'',
-
message:
''
-
},
-
time:
0
-
};
-
-
// Defined times for work, short break and long break...
-
this.times = {
-
defaultTime:
1500,
// 25 min
-
shortBreak:
300,
// 5 min
-
longBreak:
900
// 15 min
-
};
-
}
3、然后我们调用生命周期函数 componentDidMount() , 即在组件加载完成，render() 之后调用，这个方法只会触发一次，在这个例子中 ，我们将 time 的数值状态初始化为1500秒，即25分钟，在这里我们调用了初始化默认时间的方法 setDefaultTime() 方法 。
-
componentDidMount() {
-
// Set default time when the component mounts
-
this.setDefaultTime();
-
}
-
-
setDefaultTime = () => {
-
// Default time is 25 min
-
this.setState({
-
time: this.times.defaultTime
-
});
-
}
4、完成了这些基本的定义后，我们需要呈现组件的界面 ，我们的render()方法示例代码如下：
-
render() {
-
const { alert: { message, type }, time } = this.state;
-
-
return (
-
<div className=
"Pomodoro">
-
<div className={`alert ${type}`}>
-
{message}
-
</div>
-
-
<div className=
"timer">
-
{this.displayTimer(time)}
-
</div>
-
-
<div className=
"types">
-
<button
-
className=
"start"
-
onClick={this.setTimeForWork}
-
>
-
Start Working
-
</button>
-
<button
-
className=
"short"
-
onClick={this.setTimeForShortBreak}
-
>
-
Short
Break
-
</button>
-
<button
-
className=
"long"
-
onClick={this.setTimeForLongBreak}
-
>
-
Long
Break
-
</button>
-
</div>
-
</div>
-
);
-
};
5、从上述代码，我们可以看出我们JSX代码很简单，我们定义变量来接收本地数据状态的值，提醒消息、类型及任务时间，当用户的任务时间到达时，我们用一块div区域展示提醒信息。你也许会注意到，这里我们使用了displayTimer() 方法展示计时器信息，这里我们传入的参数是秒，其将会格式成 mm：ss 的形式，最后我们在界面里添加了几个按钮，用于设置任务的计数器，比如开始工作25分钟，短暂休息5分钟，或者长时间休息15分钟，我们在任务按钮上，分别定义了相关的方法事件，接下来我们要完成这些事件方法。
6、首先我们来看看setTimeForWork()、setTimeForShortBreak() 和 setTimeForLongBreak() 这三个方法，这三个方法主要作用就是更新任务类型、提醒信息及任务时间，在每个方法里我们在函数返回时触发调用 setTime() 函数用于重置任务时间计时器。这三个方法的示例代码如下：
-
setTimeForWork = () => {
-
this.setState({
-
alert: {
-
type:
'work',
-
message:
'Working!'
-
}
-
});
-
-
return this.setTime(this.times.defaultTime);
-
}
-
-
setTimeForShortBreak = () => {
-
this.setState({
-
alert: {
-
type:
'shortBreak',
-
message:
'Taking a Short Break!'
-
}
-
});
-
-
return this.setTime(this.times.shortBreak);
-
}
-
-
setTimeForLongBreak = () => {
-
this.setState({
-
alert: {
-
type:
'longBreak',
-
message:
'Taking a Long Break!'
-
}
-
});
-
-
return this.setTime(this.times.longBreak);
-
}
7、在前面文章里，我们学习了箭头函数里this的穿透作用，这意味着我们不需要在构造函数中进行绑定。现在我们来看看 setTime() 函数是如何定义的。
-
setTime = newTime => {
-
this.restartInterval();
-
-
this.setState({
-
time: newTime
-
});
-
}
8、从上述代码你可以看出，我们调用一个 restartInterval() 方法重置任务时间，我们通过 newTime 传参的形式更新了 time 状态的值。接下来我们来实现 restartInterval() 方法 ，首先清理计时器 ，然后每秒执行计时器的相关方法，示例代码如下：
-
restartInterval = () => {
-
// Clearing the interval
-
clearInterval(this.interval);
-
-
// Execute countDown function every second
-
this.interval = setInterval(this.countDown,
1000);
-
}
9、上述代码 clearInterval(this.interval) 函数的作用就是清理计时器，因为我们进行任务切换时，需要重置计时器，然后调用 countDown 计时方法，其代码示例如下：
-
countDown = () => {
-
// If the time reach 0 then we display Buzzzz! alert.
-
if (this.state.time ===
0) {
-
this.setState({
-
alert: {
-
type:
'buz',
-
message:
'Buzzzzzzzz!'
-
}
-
});
-
}
else {
-
// We decrease the time second by second
-
this.setState({
-
time: this.state.time -
1
-
});
-
}
-
}
10、最后我们来完成该组件的最后一个方法，其功能就是把时间格式化成 mm:ss 的形式，示例代码如下：
-
displayTimer(seconds) {
-
// Formatting the time into mm:ss
-
const m = Math.floor(seconds %
3600 /
60);
-
const s = Math.floor(seconds %
3600 %
60);
-
-
return `${m <
10 ?
'0' :
''}${m}:${s <
10 ?
'0' :
''}${s}`;
-
}
11、最终我们完成组件代码如下所示：
-
import React,{Component} from
"react";
-
import
'./Timer.css';
-
class Timer extends Component{
-
constructor() {
-
super();
-
this.state={
-
alert:{
-
type:
'',
-
message:
''
-
},
-
time:
0
-
};
-
this.times = {
-
defaultTime:
1500,
// 25 min
-
shortBreak:
300,
// 5 min
-
longBreak:
900
-
}
-
};
-
-
componentDidMount() {
-
this.setDefaultTime();
-
}
-
setDefaultTime = () =>{
-
this.setState({
-
time: this.times.defaultTime
-
});
-
};
-
-
setTime = newTime => {
-
this.restartInterval();
-
this.setState({
-
time:newTime
-
});
-
};
-
-
restartInterval = () => {
-
clearInterval(this.interval);
-
this.interval = setInterval(this.countDown,
1000);
-
};
-
-
countDown = ()=>{
-
// If the time reach 0 then we display Buzzzzzz! alert
-
if(this.state.time===
0){
-
this.setState({
-
alert:{
-
type:
'buz',
-
message:
'Buzzzzzzzz!'
-
}
-
})
-
}
else {
-
// We decrease the time second by second
-
this.setState({
-
time:this.state.time
-1
-
})
-
}
-
};
-
-
setTimeForWork = ()=> {
-
this.setState({
-
alert:{
-
type:
'work',
-
message:
'Working'
-
}
-
});
-
return this.setTime(this.times.defaultTime);
-
};
-
-
setTimeForShortBreak = () =>{
-
this.setState({
-
alert:{
-
type:
'shortBreak',
-
message:
'Taking a short Break!'
-
}
-
});
-
return this.setTime(this.times.shortBreak);
-
};
-
-
setTimeForLongBreak = ()=>{
-
this.setState({
-
alert:{
-
type:
'longBreak',
-
message:
'Taking a Long Break!'
-
}
-
});
-
return this.setTime(this.times.longBreak);
-
};
-
displayTimer(seconds){
-
const m = Math.floor(seconds %
3600 /
60);
-
const s = Math.floor(seconds %
3600 %
60);
-
return `${m <
10 ?
'0' :
''} ${m} : ${ s <
10 ?
'0' :
''} ${s}`;
-
}
-
render() {
-
const { alert : {message , type },time } =this.state;
-
return(
-
<div className=
"Pomodoro">
-
-
<div className={`alert ${type}`}>
-
{message}
-
</div>
-
-
<div className=
"timer">
-
{this.displayTimer(time)}
-
</div>
-
-
<div className=
"types">
-
<button
-
className=
"start"
-
onClick={this.setTimeForWork}
-
>
-
Start Working
-
</button>
-
<button
-
className=
"short"
-
onClick={this.setTimeForShortBreak}
-
>
-
short
Break
-
</button>
-
<button
-
className=
"long"
-
onClick={this.setTimeForLongBreak}
-
>
-
Long
Break
-
</button>
-
</div>
-
</div>
-
);
-
}
-
}
-
-
export
default Timer;
12、组件代码完成后，最后一步就是添加样式了，以下代码是番茄计时器的css代码，你可以根据需要自行修改：
-
.Pomodoro {
-
padding:
50px;
-
}
-
-
.Pomodoro .timer {
-
font-size:
100px;
-
font-weight: bold;
-
}
-
-
.Pomodoro .alert {
-
font-size:
20px;
-
padding:
50px;
-
margin-bottom:
20px;
-
}
-
-
.Pomodoro .alert.work {
-
background:
#5da423;
-
}
-
-
.Pomodoro .alert.shortBreak {
-
background:
#f4ad42;
-
}
-
-
.Pomodoro .alert.longBreak {
-
background:
#2ba6cb;
-
}
-
-
.Pomodoro .alert.buz {
-
background:
#c60f13;
-
}
-
-
.Pomodoro button {
-
background:
#2ba6cb;
-
border:
1px solid
#1e728c;
-
box-shadow:
0
1px
0 rgba(
255,
255,
255,
0.5) inset;
-
color: white;
-
cursor: pointer;
-
display: inline-block;
-
font-size:
14px;
-
font-weight: bold;
-
line-height:
1;
-
margin:
50px
10px
0px
10px;
-
padding:
10px
20px
11px;
-
position: relative;
-
text-align: center;
-
text-decoration: none;
-
}
-
-
.Pomodoro button.start {
-
background-color:
#5da423;
-
border:
1px solid
#396516;
-
}
-
-
.Pomodoro button.short {
-
background-color:
#f4ad42;
-
border:
1px solid
#dd962a;
-
}
最后不要忘记将组件引入到App.js文件中进行调用，如果你正确完成上述操作，就能看到你的计时器如下图所示：
工作任务状态
短暂休息状态
长时间休息状态
任务结束提醒
小节
本篇文章的内容就和大家分享到这里，想必大家对这个函数 componentDidMount() 的用法了解了吧，因为它只会被执行一次，在页面挂载成功的时候执行，我们的Ajax数据请求一般是放在componentDidMount 生命周期函数中进行调用，当然你也可以放在componentWillMount 函数中。下篇本系列文章，我将和大家继续通过实例的形式介绍生命周期函数shouldComponentUpdate(),敬请期待...
React基础相关文章
专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！
长按关注"前端达人"
转载：https://blog.csdn.net/Ed7zgeE9X/article/details/104177857