React 基礎知識~useReducer/ countup

• useReducer 是一個控制元件狀態的 React hook。

• 這個鉤子常用來控制輸入值。

• 這個hook的特點是，與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中文網其他相關文章！