react中useReducer的使用

// 导入React核心库及所需的类型和Hooks // FC: FunctionComponent 函数组件类型，用于约束组件类型 // useReducer: 用于复杂状态管理的Hook，替代useState处理多状态/复杂逻辑 // useState: 基础状态管理Hook（本示例未实际使用，保留导入仅作参考） import React, { FC, useReducer, useState } from 'react' /** * 定义状态的类型接口 * 约束useReducer中state的结构，确保类型安全 */ type StateType = { // 计数数值，核心状态字段 count: number } /** * 定义动作的类型接口 * 约束dispatch派发的action对象结构 */ type ActionType = { // 动作类型标识，用于reducer中区分不同操作 type: string // 若需要传递额外数据，可扩展该接口，例如：payload?: any } /** * 初始化状态值 * 作为useReducer的初始状态，定义count的初始值为100 */ const initialState: StateType = { count: 100 } /** * Reducer函数：纯函数，负责根据action更新状态 * 核心原则：不可变数据，返回新的state对象而非修改原对象 * @param state 当前状态（更新前的状态） * @param action 派发的动作对象，包含type标识 * @returns 新的状态对象（必须与StateType类型匹配） */ function reducer(state: StateType, action: ActionType) { // 根据action.type区分不同的状态更新逻辑 switch (action.type) { // 处理计数增加的动作 case 'increment': // 返回新状态：count在原有基础上加1 return { count: state.count + 1 } // 处理计数减少的动作 case 'decrement': // 返回新状态：count在原有基础上减1 return { count: state.count - 1 } // 处理未知动作类型，抛出错误提示 default: throw new Error(`未匹配到action类型: ${action.type}`) } } /** * 计数组件：使用useReducer管理计数状态 * FC类型约束：确保组件符合React函数组件的规范 */ const CountReducer: FC = () => { // 使用useReducer Hook创建状态和派发动作的方法 // 参数1: reducer函数（处理状态更新逻辑） // 参数2: initialState（初始状态） // 返回值: // state: 当前最新的状态对象（类型为StateType） // dispatch: 派发动作的函数，用于触发状态更新 const [state, dispatch] = useReducer(reducer, initialState) return ( // 片段标签：无需额外DOM节点包裹子元素 <> {/* 展示当前计数数值：从state中读取count */} <span>count:{state.count}</span> {/* 增加按钮：点击时派发increment类型的动作 */} <button onClick={() => dispatch({ type: 'increment' })} > + </button> {/* 减少按钮：点击时派发decrement类型的动作 */} <button onClick={() => dispatch({ type: 'decrement' })} > - </button> </> ) } // 导出组件，供其他模块导入使用 export default CountReducer

关键注释说明：

1. 类型定义：清晰标注StateType和ActionType的作用，约束状态和动作的结构，体现 TypeScript 的类型安全特性。

2. Reducer 函数：重点说明纯函数特性、不可变数据原则，以及每个 case 分支的作用。

3. useReducer 使用：解释 Hook 的参数和返回值，明确state（当前状态）和dispatch（动作派发函数）的含义。

4. UI 交互：标注按钮点击事件中dispatch的作用，说明如何通过派发不同类型的动作触发状态更新。

5. 代码结构：注释片段标签、导出语句等细节，帮助理解 React 组件的基本结构。