React 18.1版本下实现的数字时钟无法正常运行问题求助

你的代码在React18下运行异常核心是三个写法问题，和版本兼容性无关，只是React18默认开启的严格模式把之前隐藏的问题直接暴露出来了：

• setInterval直接写在组件函数的顶层作用域：组件每触发一次重渲染，就会新增一个重复的定时器，运行时间越久定时器数量越多，状态更新会完全混乱。React18开发环境的严格模式会在首次挂载时执行两次挂载/卸载流程做逻辑校验，这个问题会被立刻放大，旧版本没有这个校验机制，所以短时间测试看起来好像能跑。
• 时间值只在组件首次渲染时计算了一次：你定义的time常量是组件第一次执行时生成的固定值，定时器触发更新时传入状态更新函数的永远是这个初始时间，根本不会拿到最新的当前时间。
• 没有做定时器清理：组件卸载后定时器依然在后台执行，会造成内存泄漏。

修复后的正确实现 #

需要用useEffect管理定时器的生命周期，每次触发定时器时重新获取最新时间，同时在组件卸载时清除定时器，代码如下：

import React, { useState, useEffect } from "react";
import logo from './logo.svg';
import './App.css';

function App() {
  // 初始化时直接拿一次当前时间做初始值
  const [uptime, setUptime] = useState(new Date().toLocaleTimeString())

  useEffect(() => {
    // 仅在组件首次挂载时创建定时器
    const timer = setInterval(() => {
      // 每次定时器触发都重新生成最新时间，再更新状态
      const currentTime = new Date().toLocaleTimeString()
      setUptime(currentTime)
    }, 1000)

    // 组件卸载时执行清理，清除定时器避免内存泄漏
    return () => clearInterval(timer)
  }, []) // 空依赖数组保证effect只在挂载/卸载时执行

  return (
    <>
      <h1>TIME</h1>
      {uptime}
    </>
  )
}

export default App;

这个写法完全兼容React18的严格模式，不会出现重复创建定时器、时间不更新的问题。

内容的提问来源于stack exchange，提问作者Chiku