React hooks——useReducer

一、简介

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

1.1 核心概念

• Reducer 函数

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

(state, action) => newState

• Action

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

• Dispatch 函数

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

• 初始状态

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

1.2 基础语法

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

• reducer：处理状态更新的函数。

• initialArg：初始状态值或初始化函数的参数。

• init（可选）：初始化函数，返回初始状态。

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

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

• 有 init 函数（惰性初始化）：

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

  • initialArg：传递给 init 函数的参数。

  • init：函数，接收 initialArg 并返回实际初始状态。

二、代码实现

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>
  );
}