30-seconds-of-react React 30 seconds learning: Full Chinese translation, learning, address: 30-seconds-of-react-zh_cn-umi, all cases with analysis, annotation, online.

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 Seconds Learning: Create a star rating component
  • React 30 Seconds Learning: Make TAB components

Countdown module

Renders a countdown timer that prints messages when zero is reached.

  • Use object deconstruction to set it uphours.minutesandsecondsThe default value of prop.
  • useReact.useState()Hook to createtime.pausedandoverState variables, and set their values to the props passed, respectively,falseandfalseThe value of the.
  • Create a methodtick, it updates based on the current valuetimeTo reduce the time by one second.
  • ifpaused 或 over 是 true ，tickWill return immediately.
  • Create a methodresetReset all state variables to their initial state.
  • useReact.useEffect()Hook by usingsetInterval()A second calltickMethod and used when uninstalling a componentclearInterval()Clean up.
  • use<div>withtimeWrapping a textual representation of a state variable<p>Element, as well as pause/cancel pause and restart timers, respectively<button>Elements.
  • ifoverfortrueThe timer will display a message instead oftimeThe value of the.
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 is an object by default
  const [time, setTime] = React.useState({
    hours: parseInt(hours),
    minutes: parseInt(minutes),
    seconds: parseInt(seconds)
  });

  const tick = (a)= > {
    // Pause, or end
    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
      });
  };

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

  React.useEffect((a)= > {
    // Execute timing
    let timerID = setInterval((a)= > tick(), 1000);
    // Clean up when uninstalling components
    return (a)= > 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>
  );
}
Copy the code
example 
export default function() {
  return <CountDown hours="1" minutes="45" />;
}
Copy the code
  • The sample code
  • Running effect