Реагируйте быстро за 30 секунд: создание компонента обратного отсчета

React.js

Эта статья переведена с:30-seconds-of-react. Быстрое обучение React за 30 секунд: полный китайский перевод, обучение, адрес:30-seconds-of-react-zh_CN-umi, все случаи анализируются, аннотируются и запускаются.

Серия статей:

компонент обратного отсчета

Отображает таймер обратного отсчета, выводя сообщение при достижении нуля.

  • Используйте деструктурирование объекта для установкиhours,minutesа такжеsecondsЗначение по умолчанию реквизита.
  • использоватьReact.useState()крючок для созданияtime,pausedа такжеoverпеременные состояния и установить их значения в переданные реквизиты соответственно,falseа такжеfalseценность .
  • создать методtick, который обновляется на основе текущего значенияtimeзначение (то есть уменьшить время на одну секунду).
  • еслиpausedилиoverдаtrue,tickвернется немедленно.
  • создать методreset, сбрасывает все переменные состояния в исходное состояние.
  • использоватьReact.useEffect()крючок с помощьюsetInterval()звонков в секундуtickметод и использовать при выгрузке компонентаclearInterval()Очистить.
  • использовать<div>использоватьtimeОболочка текстового представления для переменных состояния<p>элемент и два для приостановки/возобновления и перезапуска таймера соответственно<button>элемент.
  • еслиoverдляtrue, таймер отобразит сообщение вместоtimeценность .
import React from "react";
function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
  const [paused, setPaused] = React.useState(false);
  const [over, setOver] = React.useState(false);
  // time 默认值是一个 object
  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>
  );
}
пример 
export default function() {
  return <CountDown hours="1" minutes="45" />;
}
Категории