React中仅更新time状态却触发所有Date值更新的问题求助

在React项目中，通过useState和useEffect实现时间（小时）的动态展示，time状态的更新本身没有问题，但在组件中创建另一个Date对象并将其相关值用于JSX后，所有这些值都会随着组件更新而刷新，而我只想让time状态更新。问题出在哪里？有什么解决思路？

代码示例：

const [time, setTime] = useState((''))

useEffect(() => {
    const interval = setInterval(() => {
        setTime(prevState => new Date().toLocaleTimeString())
    }, 1000);

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

const now = new Date();
const dateString = now.toLocaleDateString();
const dateStringTime = now.toLocaleTimeString();
const isoString = now.toISOString();

const milliSec = now.getTime();
const annee = now.getFullYear();
const month = now.getMonth();
const jourMois = now.getDate();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const heure = now.getHours();

问题根源 #

你在组件的顶层作用域直接创建了const now = new Date()，以及基于它的一系列变量。React组件每次状态更新（比如setTime触发的重渲染）时，组件函数会重新执行一遍——这意味着每1秒定时器更新time时，都会重新创建一个新的Date对象，所有基于它的变量也会被重新计算，自然会跟着刷新。

解决思路 #

根据你的需求分两种场景处理：

场景1：其他Date相关值只需要初始化时的固定值 #

如果这些值（比如dateString、annee等）只需要组件第一次渲染时的初始值，不需要后续更新，可以用useState或useMemo缓存，确保只计算一次：

方案1：用useState初始化

const [time, setTime] = useState('')
// 初始化时一次性获取固定日期值
const [fixedDateValues, setFixedDateValues] = useState(() => {
  const now = new Date();
  return {
    dateString: now.toLocaleDateString(),
    isoString: now.toISOString(),
    milliSec: now.getTime(),
    annee: now.getFullYear(),
    month: now.getMonth(),
    jourMois: now.getDate(),
    initialSeconds: now.getSeconds(),
    initialMinutes: now.getMinutes(),
    initialHeure: now.getHours()
  }
})

useEffect(() => {
    const interval = setInterval(() => {
        setTime(prevState => new Date().toLocaleTimeString())
    }, 1000);

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

// 使用时直接取fixedDateValues中的值，比如fixedDateValues.dateString

方案2：用useMemo缓存

const [time, setTime] = useState('')

useEffect(() => {
    const interval = setInterval(() => {
        setTime(prevState => new Date().toLocaleTimeString())
    }, 1000);

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

// 空依赖数组确保只在组件挂载时计算一次
const fixedDateValues = useMemo(() => {
  const now = new Date();
  return {
    dateString: now.toLocaleDateString(),
    dateStringTime: now.toLocaleTimeString(),
    isoString: now.toISOString(),
    milliSec: now.getTime(),
    annee: now.getFullYear(),
    month: now.getMonth(),
    jourMois: now.getDate(),
    seconds: now.getSeconds(),
    minutes: now.getMinutes(),
    heure: now.getHours()
  }
}, [])

场景2：其他Date相关值需要在特定时机更新 #

如果这些值需要在特定场景（比如用户点击按钮）下更新，而非随time每秒刷新，可以把计算逻辑封装成函数，只在需要时调用：

const [time, setTime] = useState('')
const [dateValues, setDateValues] = useState(() => {
  const now = new Date();
  return {
    dateString: now.toLocaleDateString(),
    // ...其他初始值
  }
})

// 封装更新函数，需要时触发
const updateDateValues = () => {
  const now = new Date();
  setDateValues({
    dateString: now.toLocaleDateString(),
    // ...其他需要更新的值
  })
}

useEffect(() => {
    const interval = setInterval(() => {
        setTime(prevState => new Date().toLocaleTimeString())
    }, 1000);

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

// 示例：点击按钮更新日期值
// <button onClick={updateDateValues}>更新日期</button>

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