javascript - 如何使用 setInterval 或其他方式在 React 中重新渲染特定组件？

Question

我已经在 React 中为时间计数器创建了功能组件。一切正常。但是，组件不会在每一秒后重新渲染。我是 React 的新手。

那么，我们如何使用 setInterval() 重新渲染功能组件？

import React from 'react'
import withStyle from 'react-jss'


const counterStyle = {
    counter:{
        color:'#FFFFFF'
    }
}

let date = new Date();    
let todayDate = date.getDate();
let hours = date.getHours()
let minutes = date.getMinutes();
let second = date.getUTCSeconds();    

const timerDisplay = () => {
     date = new Date();    
     todayDate = date.getDate();
     hours = date.getHours()
     minutes = date.getMinutes();
     second = date.getUTCSeconds();    
}

const TimeCounter = ({classes}) => {
    setInterval(() => {
        timerDisplay()
    }, 1000);
    return(
        <div className={classes.counter}>
            <h1>{`${hours} : ${minutes} : ${second} : ${todayDate}`}</h1>
        </div>
    )
}

export default withStyle(counterStyle)(TimeCounter);

Answer 1

您可以使用 useState钩子(Hook)存储 date,

const [timer, setTimer] = useState(new Date());

您必须使用 useEffect钩子(Hook)以间隔更新状态，

useEffect(() => {
   const interval = setInterval(() => {
      console.log('This will run every second!');
      setTimer(new Date());
   }, 1000);

   // This is important, you must clear your interval when component unmounts
   return () => clearInterval(interval);

}, [])  // [] is for to execute `useEffect` only once as `componentWillMount`

Demo