ReactJS v18 计时器实现 - 点击按钮开始计时并显示已用时间

在 ReactJS v18 中，你可以使用函数组件和 React Hooks 来实现这个功能。\n\n首先，在组件中定义一个状态变量来存储已经过去的时间。然后，使用 `useEffect` 钩子来启动一个定时器，每秒更新已过去的时间。最后，在页面上展示已经过去的时间。\n\n下面是一个示例代码：\n\njsx\nimport React, { useState, useEffect } from 'react';\n\nconst Timer = () => {\n const [elapsedTime, setElapsedTime] = useState(0);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setElapsedTime(prevTime => prevTime + 1);\n }, 1000);\n\n return () => {\n clearInterval(interval);\n };\n }, []);\n\n const formatTime = time => {\n const minutes = Math.floor(time / 60);\n const seconds = time % 60;\n return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n };\n\n return (\n <div>\n <button onClick={() => setElapsedTime(0)}>Start</button>\n <p>Elapsed Time: {formatTime(elapsedTime)}</p>\n </div>\n );\n};\n\nexport default Timer;\n\n\n在上面的代码中，我们使用 `useState` 来创建一个名为 `elapsedTime` 的状态变量来存储已经过去的时间。然后，我们使用 `useEffect` 钩子来启动一个定时器，每秒更新 `elapsedTime` 的值。在组件卸载时，我们使用 `clearInterval` 清除定时器。\n\n`formatTime` 函数用于格式化已过去的时间，将其转换为 `MM:SS` 的格式。\n\n在组件的返回部分，我们渲染一个按钮用于开始计时，并在点击按钮时将 `elapsedTime` 重置为 0。然后，我们展示已经过去的时间。\n\n以上是一个简单的计时器示例，你可以根据需要进行修改和扩展。