Asas React~useReducer/ countup

• UseReducer ialah cangkuk tindak balas yang mengawal keadaan komponen.

• Kail ini selalunya digunakan untuk mengawal nilai input.

• Ciri cangkuk ini ialah, tidak seperti useSate, ia telah memutuskan cara mengemas kini keadaan terlebih dahulu.

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

• Fungsi `pengurang' mengemas kini keadaan, mis. menggunakan fungsi suis.

• Kami menggunakan fungsi `penghantaran' menghantar parameter objek seperti jenis, langkah dan sebagainya.

・Tindakan kiraan.

・Tindakan kira detik.

Atas ialah kandungan terperinci Asas React~useReducer/ countup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!