react 一个小时倒计时

你可以使用React Hooks和useState来实现一个小时倒计时，以下是一个简单的实现：

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

function Countdown() {
  const [countdown, setCountdown] = useState(3600); // 3600秒等于1小时

  useEffect(() => {
    const timer =
      countdown > 0 && setInterval(() => setCountdown(countdown - 1), 1000);
    return () => clearInterval(timer);
  }, [countdown]);

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${minutes.toString().padStart(2, "0")}:${seconds
      .toString()
      .padStart(2, "0")}`;
  };

  return <div>{formatTime(countdown)}</div>;
}

export default Countdown;

在上面的代码中，我们使用useState来追踪倒计时的时间，每秒钟减少1秒。并且使用useEffect来清除计时器，以免在组件卸载后出现内存泄漏。最后，我们定义了一个formatTime函数来格式化剩余时间，并将其呈现在组件中。

你可以在你的应用程序中使用这个组件，如下所示：

import React from "react";
import Countdown from "./Countdown";

function App() {
  return (
    <div>
      <h1>One hour countdown</h1>
      <Countdown />
    </div>
  );
}

export default App;

这将在页面上呈现一个标题和一个倒计时组件，显示剩余时间。