hook函数——useReducer

news2024/11/15 11:10:53

1.useReducer定义

const [state, dispatch] = useReducer(reducer, initialArg, init?)

reducer：用于更新 state 的纯函数。参数为 state 和 action，返回值是更新后的 state。state 与 action 可以是任意合法值。
initialArg：用于初始化 state 的任意值。初始值的计算逻辑取决于接下来的 init 参数。
可选参数 init：用于计算初始值的函数。如果存在，使用 init(initialArg) 的执行结果作为初始值，否则使用 initialArg。

2.useReducer用法

这里我使用ts的语法，根据定义可以知道，我们首先需要声明一个reducer函数，函数中包含两个参数，一个是数据的状态state，也就是初始值，另一个是对数据需要进行的操作，在函数体里面通过switch case语句指出不同的type需要进行的不同操作，这里实现的是一个计数器原理

type Action = { type: 'add' } | { type: 'del' };

function reducer(state: number, action: Action) {
  switch (action.type) {
    case 'add':
      return state + 1;
    case 'del':
      return state - 1;
    default:
      return state;
  }
}

在组件中初始化useReducer，给按钮分别添加响应事件，通过dispatch分发点击的type，就可以执行reducer函数里对应的操作了

function App() {
  const [state, dispatch] = useReducer(reducer, 0);

  const handleAdd = () => {
    dispatch({ type: 'add' });
  };

  const handleDel = () => {
    dispatch({ type: 'del' });
  };

  return (
    <div className="App">
      <h1>Count: {state}</h1>
      <button onClick={handleAdd}>Add</button>
      <button onClick={handleDel}>Del</button>
    </div>
  );
}