欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

「React 基础」组件生命周期函数componentDidMount()介绍

程序员文章站 2022-07-02 22:46:04
...

「React 基础」组件生命周期函数componentDidMount()介绍

家好,今天我们将通过一个实例——番茄计时器,学习下如何使用函数生命周期的一个重要函数componentDidMount():在组件加载完成, render之后进行调用,只会执行一次。

番茄工作法

在介绍前我们首先了解下什么是番茄工作法,有利于我们完成这个实例,番茄工作法是简单易行的[时间管理]方法,使用番茄工作法,选择一个待完成的任务,将番茄时间设为25分钟,专注工作,中途不允许做任何与该任务无关的事,直到番茄时钟响起,然后在纸上画一个X短暂休息一下(5分钟就行),每4个番茄时段多休息一会儿。关于详细的介绍可以查看百度百科。

首先看看番茄计时器长啥样

下图就是我们要制作的简易番茄计时器,默认计时器为25分钟,界面上有三个按钮,分别是工作、短时间休息、长时间休息,用来启动任务计时器。

「React 基础」组件生命周期函数componentDidMount()介绍

创建番茄计时器

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文件中进行调用,如果你正确完成上述操作,就能看到你的计时器如下图所示:

工作任务状态

「React 基础」组件生命周期函数componentDidMount()介绍

短暂休息状态

「React 基础」组件生命周期函数componentDidMount()介绍

长时间休息状态

「React 基础」组件生命周期函数componentDidMount()介绍

任务结束提醒

「React 基础」组件生命周期函数componentDidMount()介绍

小节

本篇文章的内容就和大家分享到这里,想必大家对这个函数 componentDidMount() 的用法了解了吧,因为它只会被执行一次,在页面挂载成功的时候执行,我们的Ajax数据请求一般是放在componentDidMount 生命周期函数中进行调用,当然你也可以放在componentWillMount 函数中。下篇本系列文章,我将和大家继续通过实例的形式介绍生命周期函数shouldComponentUpdate(),敬请期待...

React基础相关文章

专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!

长按关注"前端达人"

「React 基础」组件生命周期函数componentDidMount()介绍

「React 基础」组件生命周期函数componentDidMount()介绍