React Basics~useReducer/countup

• Der useReducer ist ein Reaktions-Hook, der den Zustand der Komponente steuert.

• Dieser Hook wird häufig zur Steuerung des Eingabewerts verwendet.

• Das Besondere an diesem Hook ist, dass er im Gegensatz zu useSate vorher entschieden hat, wie der Status aktualisiert wird.

・src/Example.js

import { useReducer } from "react";

const reducer = (prev, { type, step }) => {
  switch (type) {
    case "+":
      return prev + step;
    case "-":
      return prev - step;
    default:
      throw new Error("Invalid action");
  }
};

const Example = () => {
  const [state, dispatch] = useReducer(reducer, 0);

  const countup = () => {
    dispatch({ type: "+", step: 2 });
  };

  const countdown = () => {
    dispatch({ type: "-", step: 3 });
  };

  return (
    <>
      <h3>{state}</h3>
      <button onClick={countup}>+</button>
      <button onClick={countdown}>-</button>
    </>
  );
};

export default Example;

• Die Funktion „Reduzierer“ aktualisiert den Status, z.B. mit der Schalterfunktion.

• Wir verwenden die „Dispatch“-Funktion und übergeben einen Objektparameter wie Typ, Schritt usw.

・Eine Countup-Aktion.

・Eine Countdown-Aktion.

Das obige ist der detaillierte Inhalt vonReact Basics~useReducer/countup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!