企业官方网站模板下载域名查询服务器
一、简介
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>);
}