在 React 中创建时钟答案

【问题标题】：Creating Clock in React在 React 中创建时钟
【发布时间】：2022-01-16 21:38:11
【问题描述】：

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

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>
}

【问题讨论】：

“我已经使用 Hooks 编写了代码，但我知道在这种情况下使用 Hooks 对性能不利” - 不，不是。反应中没有其他最新的惯用选项。这个想法是不重新渲染不应重新渲染的组件。如果您需要计时器，请在单独的组件中执行此操作，无需更新整个页脚
哦，感谢您注意到我将它用于页脚，所以我应该为时钟制作一个新的功能组件，然后我猜应该很好
@AbhayRohit 是的，您可以创建另一个组件。在这种情况下，状态更改只会影响计时器组件。问题是，当您调用 setTime() 时，整个组件将重新渲染，如果您的页脚中有 5 个其他组件，那么它们也会被重新渲染。你也可以只记住其他组件，但这是有代价的，并不总是值得的。

标签： javascript reactjs function date timer

【解决方案1】：

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

【讨论】：

感谢您提供的信息，我在反应中学到了很多东西?
没问题！我自己很新手，所以没有压力:)