「React 基础」组件生命周期函数componentDidMount()介绍
大家好，今天我们将通过一个实例——番茄计时器，学习下如何使用函数生命周期的一个重要函数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.js2、接下来，我们需要在构造函数方法里 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基础相关文章
专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！
长按关注"前端达人"
上一篇： React 生命周期 constructor->componentWillMount->render->componentDidMount->componentWillUnmount
下一篇： Flutter 列表踩坑
推荐阅读
-
「React 基础」组件生命周期函数componentDidMount()介绍
-
react---组件生命周期（componentDidMount、shouldComponentUpdate等）---点击按钮小球隐藏显示--demo
-
React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解
-
React Native 中组件生命周期的简单介绍
-
React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解
-
React Native 中组件生命周期的简单介绍
-
React组件的生命周期函数是什么
-
react的基础组件如何使用？react的基础组件和生命周期的介绍
-
react的基础组件如何使用？react的基础组件和生命周期的介绍
-
React组件的生命周期函数是什么