Bases de React~useReducer/countup

• Le useReducer est un hook de réaction qui contrôle l'état du composant.

• Ce hook est souvent utilisé pour contrôler la valeur d'entrée.

• La particularité de ce hook est que, contrairement à useSate, il a décidé au préalable comment mettre à jour l'état.

・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;

• La fonction « réducteur » met à jour l'état, par ex. en utilisant la fonction de commutation.

• Nous utilisons la fonction `dispatch' en passant un paramètre d'objet comme le type, l'étape, etc.

・Une action de décompte.

・Une action de compte à rebours.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!