转载说明：原创不易，未经授权，谢绝任何形式的转载

有时，我们希望在React中创建一个倒计时器。在本文中，我们将讨论如何使用React创建一个倒计时器。

使用React创建倒计时器

我们可以通过创建一个定时器组件并定期更新剩余时间来实现倒计时器。为此，我们可以编写以下代码：

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

// 定义 Timer 组件
const Timer = (props) => {
  // 解构赋值，获取传入的初始分钟数和初始秒数
  const { initialMinute = 0, initialSeconds = 0 } = props;
  
  // 使用 useState 创建状态变量 minutes 和 seconds
  const [minutes, setMinutes] = useState(initialMinute);
  const [seconds, setSeconds] = useState(initialSeconds);
  
  // 使用 useEffect 监听组件的生命周期
  useEffect(() => {
    // 创建定时器，每秒更新一次剩余时间
    const myInterval = setInterval(() => {
      // 如果秒数大于0，则减去1秒
      if (seconds > 0) {
        setSeconds(seconds - 1);
      }
      // 如果秒数为0
      if (seconds === 0) {
        // 如果分钟数也为0，则清除定时器，停止倒计时
        if (minutes === 0) {
          clearInterval(myInterval);
        } else {
          // 如果分钟数不为0，则将分钟数减1，秒数设为59
          setMinutes(minutes - 1);
          setSeconds(59);
        }
      }
    }, 1000);

    // 组件卸载时清除定时器
    return () => {
      clearInterval(myInterval);
    };
  });

  // 返回倒计时器的渲染结果
  return (
    <div>
      {minutes === 0 && seconds === 0 ? null : (
        <h1>
          {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
        </h1>
      )}
    </div>
  );
};

// 默认导出 App 组件
export default function App() {
  // 在 App 组件中使用 Timer 组件，并传入初始分钟数和秒数
  return (
    <>
      <Timer initialMinute={5} initialSeconds={0} />
    </>
  );
}

我们创建了一个Timer组件，它接受initialMinute和initialSeconds作为props来设置初始时间。

然后我们使用useState来创建minutes和seconds的状态变量。

接下来，我们使用useEffect钩子并传入一个回调函数，用于创建一个使用setInterval的计时器。

计时器每秒运行一次。

setInterval的回调函数检查seconds是否大于0，如果是，则调用setSeconds来减少秒数。

如果seconds为0且minutes为0，则调用clearInterval来停止计时器。

否则，我们调用setMinutes来减少分钟数，同时将seconds设置为59来减少分钟。

然后我们返回一个回调函数，调用clearInterval来清除计时器。

在函数末尾，我们将分钟和秒数渲染到屏幕上。

如果秒数小于10，我们在前面添加一个0。

结论

通过创建一个定时器组件并定期更新剩余时间，我们可以创建一个倒计时器。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

Tags：前端定时器

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。