React hooks——useReducer

安心不心安2025-07-18 21:26

一、简介

useReducer 是 React 提供的一个高级 Hook，用于管理复杂的状态逻辑。它类似于 Redux 中的 reducer 模式，适合处理包含多个子值、依赖前一个状态或逻辑复杂 的状态更新场景。与 useState 相比，useReducer 提供更结构化的状态管理方式。

1.1 核心概念

Reducer 函数

纯函数，接收当前状态 state 和操作指令 action，返回新状态：

javascript 复制代码

(state, action) => newState

Action

描述状态变化的普通对象，通常包含 type 字段（操作类型）和可选数据 payload。

Dispatch 函数

用于触发状态更新，调用方式：dispatch(action)。

初始状态

可直接提供初始值，或通过 惰性初始化函数 生成（适合复杂初始逻辑）。

1.2 基础语法

javascript 复制代码

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

reducer：处理状态更新的函数。
initialArg：初始状态值或初始化函数的参数。
init（可选）：初始化函数，返回初始状态。

无 init 函数（直接初始值）：

javascript 复制代码

const [state, dispatch] = useReducer(reducer, { count: 0 });

有 init 函数（惰性初始化）：
javascript 复制代码
```
const [state, dispatch] = useReducer(reducer, initialArg, init);
```
- initialArg：传递给 init 函数的参数。
- init：函数，接收 initialArg 并返回实际初始状态。

二、代码实现

javascript 复制代码

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "INC":
      return state + 1;
    case "DEC":
      return state - 1;
    case "TO10":
      return 10;
    default:
      return state - 1;
  }
}

export default function App() {
  const [num, dispatch] = useReducer(reducer, 0);
  return (
    <div>
      <div>当前值:{num}</div>
      <button onClick={() => dispatch({ type: "INC" })}>+1</button>
      <button onClick={() => dispatch({ type: "DEC" })}>-1</button>
      <button onClick={() => dispatch({ type: "TO10" })}>to10</button>
    </div>
  );
}