React 状态管理：useState 与 useReducer

第一阶段：识别状态复杂度与依赖关系

1. 统计 组件内部独立状态变量的总数量。逐一核对所有使用 useState 声明的变量，若总数超过五个且存在更新交叉，立即标记为 潜在维护瓶颈。
2. 梳理 状态更新的触发链条。在代码审查时追踪数据流向，明确新值的生成是否强依赖其他状态的旧值。若存在 A 变化导致 B 变化，B 变化又反向修正 A 的环形依赖，记录为 高耦合链路。
3. 评估 业务交互的分支路径。检查 onClick、useEffect 等执行块内部的 if/else 或 switch 语句。若单一组件同时承担网络请求状态、表单校验规则与 UI 弹窗控制，标记为 多职责混合。
4. 隔离 临时变量与核心数据。将仅用于界面反馈的局部标记（如 isHovered、inputValue）保留为独立声明，将涉及接口交互、权限判定与持久化存储的数据提取至集中管理器。

第二阶段：编写 useState 逻辑

适用于独立、简单且更新逻辑直接的状态值（如开关控制、单一文本输入、布尔标记）。

1. 导入 核心钩子。在组件文件顶部写入 import React, { useState } from 'react';，确保运行环境能够识别该 API。
2. 初始化 状态容器。在函数组件顶层调用 const [isVisible, setIsVisible] = useState(false);。数组首项 isVisible 用于读取当前快照，次项 setIsVisible 负责提交变更指令。
3. 绑定 事件触发器。在 JSX 属性中直接挂载处理函数。写入 onClick={() => setIsVisible(true)} 切换 界面元素，框架会在下一个渲染周期应用新值。
4. 执行 函数式安全更新。当新状态依赖历史值或存在批量更新冲突时，向更新函数传递回调。写入 setCount(prev => prev + 1); 读取 最新基准值，避免因异步闭包捕获导致数据陈旧。
5. 克隆 对象或数组结构。若状态为引用类型，必须创建全新内存地址触发重绘。写入 setList(prev => [...prev, newItem]); 使用扩展运算符 生成 副本，直接修改原数组 prev.push() 将被渲染引擎忽略。

第三阶段：编写 useReducer 逻辑

适用于关联性强、更新分支多或包含业务规则校验的状态（如多级表单联动、列表批量操作、异步请求全生命周期）。

1. 定义 统一数据模型。规划组件需要维护的完整对象结构，明确每个字段的类型与默认值。例如设定初始值 const initialState = { users: [], isLoading: false, error: null };。
2. 创建 纯函数处理器。在组件外部编写 reducer 函数，接收当前状态与动作描述对象，返回全新状态引用。代码模板如下：

   function requestReducer(state, action) {
   switch (action.type) {
    case 'LOADING':
      return { ...state, isLoading: true, error: null };
    case 'SUCCESS':
      return { ...state, isLoading: false, users: action.payload };
    case 'FAILURE':
      return { ...state, isLoading: false, error: action.errorMessage };
    default:
      return state;
   }
   }

3. 挂载 状态管理钩子。在组件初始化位置调用 const [state, dispatch] = useReducer(requestReducer, initialState);，建立内部状态机实例。
4. 分发 标准化动作指令。在业务逻辑中调用 dispatch 并传入包含 type 键的对象。写入 dispatch({ type: 'SUCCESS', payload: apiData }); 触发 预设分支，杜绝在组件内编写冗长的条件判断。
5. 拦截 非法动作类型。在 default 分支内抛出明确错误或使用 console.warn 警告 异常调用路径，防止未定义动作污染现有数据树。

第四阶段：决策对照与实施步骤

根据实际业务特征选择匹配方案，确保代码可维护性与运行时性能。

1. 提取 散落业务规则。审查组件内所有事件处理函数与副作用钩子，将重复的 if/else 分支或状态赋值代码剥离至独立的 reducer 文件中。
2. 合并 分散状态声明。将原本分散声明的多个 useState 变量重组为结构化对象或数组，作为 Reducer 函数的初始输入源。
3. 重构 调用入口。将原有的直接更新操作全部替换为 dispatch 调用，强制 统一 数据修改通道，确保所有变更均可追溯。
4. 验证 纯函数幂等性。向 Reducer 函数传入相同动作多次，确认返回的状态树引用保持不变且副作用为零，确保 稳定 渲染结果。
5. 注入 全局上下文（可选）。若状态需跨层级共享，使用 React.createContext 包装 useReducer 的返回值，并在应用根节点挂载 Provider 组件 广播 数据源与分发方法至所有后代节点。