「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.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)}
            &