React の基本 ~useReducer/countup

• useReducer はコンポーネントの状態を制御する反応フックです。

• このフックは、入力値を制御するためによく使用されます。

• このフックの特徴は、useSate と異なり、状態の更新方法が事前に決まっていることです。

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

• 「reducer」関数は状態を更新します。スイッチ機能を使用します。

• タイプやステップなどのオブジェクトパラメータを渡す「dispatch」関数を使用します。

・カウントアップのアクションです。

・カウントダウンのアクションです。

以上がReact の基本 ~useReducer/countupの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。