在 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

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

在 React 中创建时钟

Creating Clock in React

javascript

reactjs

function

date

timer