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中文网其他相关文章！