在 React 中创建时钟

Question

我有一个网站，我想在其中一个页面上放置一个实时时钟。 我已经使用钩子编写了代码，但我知道在这种情况下使用钩子对性能不利，因为每秒都会重新渲染状态。 有没有资源消耗较少的解决方案？

import { useEffect, useState } from 'react'

export default function Footer() {
  const [time, setTime] = useState()

  useEffect(() => {

    setInterval(() => {

      const dateObject = new Date()

      const hour = dateObject.getHours()
      const minute = dateObject.getMinutes()
      const second = dateObject.getSeconds()

      const currentTime = hour + ' : ' + minute + ' : ' + second
      
      setTime(currentTime)
    }, 1000)

  }, [])

  return <div>{time}</div>
}

Answer 1

您考虑性能绝对是件好事，但在这种情况下我不会改变任何事情。为了改变渲染到屏幕上的内容（在本例中是时钟的文本），必须重新渲染组件以反映其状态的变化，这并不是一件坏事。每次组件重新渲染时，它都不会导致父组件重新渲染，因此在性能方面我们做得很好。

Answer 2

时间只会在组件初始渲染时更新一次，并且不会自动再次更新，因为 useEffect hook 的依赖数组为空 []。

要每秒持续更新时间，您应该将时间状态变量包含在 useEffect 挂钩的依赖数组中。这样，只要时间状态发生变化，效果就会重新运行，从而允许时间每秒更新。