如何使用 React 创建计时器

对于我当前的一个项目，我创建了一个计时器，直到除夕夜（2022 年 12 月 31 日）发布。由于该项目是用 React 编写的，因此我也使用相同的设置创建了计时器。

这是我写的第一篇教程。我已尽力将每个步骤解释得尽可能准确 😬。

1. 初始化 React 项目

如果要将计时器添加到现有项目，可以跳过此部分。如果您尚未设置 React 项目，请使用控制台转到要保存项目的文件夹，方法是使用

cd folder-name

并写下

npx create-react-app my-app

在控制台中初始化项目。项目准备就绪后，写入

cd my-app

进入项目文件夹，

code .

在 Visual Studio Code 中打开它（如果您正在使用此 IDE），然后

npm start

在中运行该项目localhost:3000。

您可以在创建 React 应用程序或官方 React 文档下找到进一步的说明。

2.创建计时器组件

在您的src文件夹中，创建一个名为的新文件Timer.js。

然后，创建一个与文件同名的 React 箭头函数组件，并添加 return 语句。别忘了导出该函数。



// Timer.js

import React from 'react';

const Timer = () => {

  return (
    <div className="timer">
    </div>
  );
};

export default Timer;

初始化变量

useState()我们通过从 React 导入 hook（一个内置函数）并创建所需的状态来启动该函数。对于这个长度的计时器，我们需要days、hours、minutes和second0 。由于我们处理的是整数，因此我已将默认值设置为。



// Timer.js

import React from 'react';
import { useState } from 'react';

const Timer = () => {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  return (
    <div className="timer">
    </div>
  );
};

export default Timer;

初始化截止时间

我们需要一个具体的日期来设定计时器的运行时长。在本例中，我选择了除夕，并将其声明为一个名为deadline的变量中的字符串值（稍后我们会将其转换为整数）。



// Timer.js

import React from 'react';
import { useState } from 'react';

const Timer = () => {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [seconds, setSeconds] = useState(0);

  const deadline = "December, 31, 2022";

  return (
    <div className="timer">
    </div>
  );
};

export default Timer;

创建函数来获取时间

现在让我们创建一个函数来计算到特定日期的时间。我们需要在这个函数中声明变量deadline，因为它是在组件范围内声明的，所以我们可以直接使用它Timer。

为了得到今天和截止日期之间的差异，我创建了一个名为时间的新变量，并将其值设置为截止日期的值减去当前日期的值。

为此，我们使用 JavaScript 的内置函数Date.parse()，它将我们作为 prop 传递的声明字符串deadline转换为我们可以使用的整数。

Date.now ()方法返回表示当前日期的毫秒数。



// Timer.js

import React from 'react';
import { useState } from 'react';

const Timer = () => {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  const deadline = "December, 31, 2022";

  const getTime = () => {
    const time = Date.parse(deadline) - Date.now();

  return (
    <div className="timer">
    </div>
  );
};

export default Timer;

计算变量的值

由于时间是以毫秒为单位的整数，我们现在可以计算并设置截止期限前的天数、小时、分钟和秒的值。

为了获得每个变量的值，我们需要将时间除以 1000（因为 1000 毫秒是 1 秒），将毫秒转换为秒。

要得到分钟数，我们必须将时间除以 1000（得到秒数）并除以 60（因为 1 分钟有 60 秒）。

为了得到小时数，我们必须将毫秒时间除以 1000（得到秒数）、60（得到分钟数）然后再除以 60（因为 1 小时有 60 分钟），这里用括号总结为 1000 * 60 * 60（可以缩写为 3600000）。

为了得到天数，我们需要将毫秒时间除以 1000（得到秒数）、60（得到分钟数）、再除以 60（因为 1 小时有 60 分钟）和 24（因为 1 天有 24 小时），这里用括号总结为 1000 * 60 * 60 * 24（可以缩写为 86,400,000）。

获取每个值后，我们使用余数（%）运算符将值重置为 0，例如，如果用户传递了 86.400.000 毫秒（相当于 24 小时）。

默认情况下，如果小时数大于 24，则该函数会将小时数翻转，例如，如果毫秒为 36 小时，则 hours = hours % 24 这一行会将小时数设置为 12。根据您的使用情况，您可能不想将小时数翻转。

内置函数Math.floor()返回小于或等于指定值的最大整数。



// Timer.js

import React from 'react';
import { useState } from 'react';

const Timer = () => {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  const deadline = "December, 31, 2022";

  const getTime = () => {
    const time = Date.parse(deadline) - Date.now();

    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
    setMinutes(Math.floor((time / 1000 / 60) % 60));
    setSeconds(Math.floor((time / 1000) % 60));
  };

  return (
    <div className="timer">
    </div>
  );
};

export default Timer;

为了让计时器每秒渲染一次，我们需要导入useEffect()钩子并在组件内部使用它来获取当前值。当状态需要更新时，会用到这个钩子。

我们将使用setInterval() 方法，该方法会将deadlinegetTime()作为 prop 传入，并调用我们的函数，每次调用之间会有 1000 毫秒（即 1 秒）的固定延迟。由于此函数仅在组件卸载时调用，因此我们必须使用clearInterval() 函数清除间隔，以调用重新渲染。



// Timer.js

import React from 'react';
import { useState, useEffect } from 'react';

const Timer = () => {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  const deadline = "December, 31, 2022";

  const getTime = () => {
    const time = Date.parse(deadline) - Date.now();

    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
    setMinutes(Math.floor((time / 1000 / 60) % 60));
    setSeconds(Math.floor((time / 1000) % 60));
  };

  useEffect(() => {
    const interval = setInterval(() => getTime(deadline), 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="timer">
    </div>
  );
};

export default Timer;

就是这样。

计时器的功能现已完全设置完毕。现在，您可以<div className="timer></div>根据需要在计时器组件的 return 语句中为每个变量设置样式。您可以参考我是如何设置代码样式的。别忘了将计时器组件导入到应用组件中，以便渲染。

3. 获取代码

您可以在 CodePen 中找到嵌入的代码和样式表。请注意，正如我在教程中提到的，结构上存在差异。CodePen 中没有其他文件，所有代码都在 JavaScript 部分。此外，没有进行任何导入，钩子函数以 React.useState 和 React.useEffect 开头。

4. 获取高级代码

Luke Shiru 在评论区为我的计时器添加了更高级的代码实现，我想与所有熟悉 JavaScript 或想要了解 JavaScript 的朋友分享。再次感谢您分享代码，让我的文章更加精彩。

看看 Luke Shiru 的方法



import { useEffect, useMemo, useState } from "react";

const SECOND = 1000;
const MINUTE = SECOND * 60;
const HOUR = MINUTE * 60;
const DAY = HOUR * 24;

export const Timer = ({ deadline = new Date().toString() }) => {
    const parsedDeadline = useMemo(() => Date.parse(deadline), [deadline]);
    const [time, setTime] = useState(parsedDeadline - Date.now());

    useEffect(() => {
        const interval = setInterval(
            () => setTime(parsedDeadline - Date.now()),
            1000,
        );

        return () => clearInterval(interval);
    }, []);

    return (
        <div className="timer">
            {Object.entries({
                Days: time / DAY,
                Hours: (time / HOUR) % 24,
                Minutes: (time / MINUTE) % 60,
                Seconds: (time / SECOND) % 60,
            }).map(([label, value]) => (
                <div key={label} className="col-4">
                    <div className="box">
                        <p>{`${Math.floor(value)}`.padStart(2, "0")}</p>
                        <span className="text">{label}</span>
                    </div>
                </div>
            ))}
        </div>
    );
};

感谢您的阅读和付出。我非常感激！

文章来源：https://dev.to/yuridevat/how-to-create-a-timer-with-react-7b9

如何使用 React 创建计时器

如何使用 React 创建计时器

目录

1. 初始化 React 项目

2.创建计时器组件

初始化变量

初始化截止时间

创建函数来获取时间

就是这样。

3. 获取代码

4. 获取高级代码