反应:: CountDown

呈现一个倒计时计时器，该计时器在到达零时将其打印出来。

• 使用对象解构到默认设置的 hours， minutes 和 seconds 道具。

• 使用  钩来创建 ，  并且  状态变量并将其值设置为通过道具的价值，  并  分别。React.useState()timepausedoverfalsefalse

• 创建一个方法tick，该方法 time 根据当前值更新 值（即，将时间减少一秒钟）。

• 如果 paused 或者 over 是 true， tick 将立即返回。

• 创建一个方法 reset，将所有状态变量重置为其初始状态。

• 使用  钩子 通过使用每秒调用一次该 方法，  并 在卸载组件时使用 进行清理。React.useEffect()ticksetInterval()clearInterval()

• 使用a <div> 包装 <p> 带有组件time 状态变量的文本表示形式的 <button> 元素，以及分别将暂停/取消暂停和重新启动计时器的两个 元素。

• 如果 over 是 true，计时器将显示一条消息，而不是值 time。

function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
  const [paused, setPaused] = React.useState(false);
  const [over, setOver] = React.useState(false);
  const [time, setTime] = React.useState({
    hours: parseInt(hours),
    minutes: parseInt(minutes),
    seconds: parseInt(seconds)
  });

  const tick = () => {
    if (paused || over) return;
    if (time.hours == 0 &&time.minutes== 0 &&time.seconds== 0) setOver(true);
    else if (time.minutes == 0 &&time.seconds== 0)
      setTime({
        hours:time.hours- 1,
        minutes: 59,
        seconds: 59
      });
    else if (time.seconds == 0)
      setTime({
        hours: time.hours,
        minutes:time.minutes- 1,
        seconds: 59
      });
    else
      setTime({
        hours: time.hours,
        minutes: time.minutes,
        seconds:time.seconds- 1
      });
  };

  const reset = () => {
    setTime({
      hours: parseInt(hours),
      minutes: parseInt(minutes),
      seconds: parseInt(seconds)
    });
    setPaused(false);
    setOver(false);
  };

  React.useEffect(() => {
    let timerID = setInterval(() => tick(), 1000);
    return () => clearInterval(timerID);
  });

  return (
    <div>
      <p>{`${time.hours.toString().padStart(2, '0')}:${time.minutes
        .toString()
        .padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}</p>
      <div>{over ? "Time's up!" : ''}</div>
      <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>
      <button onClick={() => reset()}>Restart</button>
    </div>
  );
}

ReactDOM.render(<CountDown hours="1" minutes="45" />, document.getElementById('root'));