React Patterns（深度工作流）

健康且可维护的 React 代码库应强调 清晰的数据流、最少的副作用 和 可预测的渲染行为。优先使用 组合 而非继承；将 副作用 视为与外部系统同步的手段，而非“渲染后执行某些操作”的通用模式。

何时提供此工作流

触发条件：

• 属性传递（prop drilling）与 Context 或外部状态管理之间的选择困惑；对 服务端组件（如 Next.js）与客户端组件的区分不清晰
• useEffect 逻辑混乱；闭包过期问题；重复请求
• 渲染性能问题；大型列表；首次加载（hydration）问题

初始建议：

采用 六个阶段 的方法论：（1）结构与边界划分，（2）状态与数据源设计，（3）自定义 Hook 规范，（4）副作用与事件处理，（5）性能优化，（6）测试与无障碍访问。确认当前使用的 React 版本 以及所处的 框架环境（如原生 CRA、Vite、Next App Router）。

阶段一：结构与边界划分

目标： 就近存放 状态；仅在有助于清晰表达时才拆分 展示型组件 与 容器型组件，而非默认做法。

实践建议

• 使用 复合组件 构建灵活的 API 接口；避免使用庞大的 props 对象
• 在 Next.js App Router 中：默认使用服务端组件；仅在需要客户端功能的叶子节点添加 use client

阶段二：状态与数据源

目标： 本地状态 用于 UI 交互；服务器状态 通过 React Query / SWR / Apollo 等工具按需获取；避免在全局状态中无规则地复制服务器数据实体。

阶段三：自定义 Hook 规范

目标： 满足 Hook 使用规则；自定义 Hook 应封装可复用的状态逻辑，并具备清晰的输入与输出。

实践建议

• 自定义 Hook 命名格式为 useThing；返回值保持稳定（必要时使用 memo 化对象）

阶段四：副作用与事件处理

目标： 用户驱动的操作优先使用 事件处理器；useEffect 仅用于与外部系统同步（如订阅、非 React 组件等）。

实践建议

• 及时清理订阅；主动取消网络请求；准确列出 effect 依赖项
• 开发环境启用 Strict Mode 会双调用 effect —— 编写时应确保副作用具有幂等性

阶段五：性能优化

目标： 优化前先进行测量；虚拟化 长列表；按路由拆分代码。

实践建议

• 仅在性能分析显示有收益时才使用 useCallback / useMemo；不要默认使用
• 在支持的场景中使用 并发特性 与 Suspense 边界

阶段六：测试与无障碍访问

目标： 使用 React Testing Library 的用户行为导向查询；确保表单具备正确的 焦点管理 与 标签关联。

最终审查清单

• [ ] 组件边界与数据所有权一致
• [ ] 服务端与客户端状态策略明确
• [ ] Hook 与副作用使用得当
• [ ] 性能优化基于实际证据
• [ ] 关键流程已覆盖测试与无障碍基础要求

提供有效指导的技巧

• 尽可能通过 推导 获取状态，避免存储冗余信息
• 在合适场景下，将 URL 作为共享 UI 状态的载体
• 遇到 Redux/Zustand 等大规模状态管理决策时，引导参考 状态管理 技能文档

处理偏离情况

• 遗留类组件：遵循相同原则；可逐步迁移至 Hooks，无需一次性重构