前端开发模式助手

这个技能能帮你做什么

做前端开发不只是把页面画出来，还要考虑代码怎么组织、状态怎么管理、性能怎么优化。这个技能提供了一套经过验证的开发模式，让你的前端项目从一开始就有良好的架构。

简单说，它能帮你：

• 设计组件 —— 怎么拆分组件、怎么组合复用、怎么处理父子关系
• 管理状态 —— 数据存在哪里、怎么传递、什么时候该用全局状态
• 优化性能 —— 减少不必要的渲染、懒加载、虚拟列表等提速技巧
• 处理表单 —— 表单校验、数据收集、错误提示的最佳实践
• 添加交互 —— 动画效果、弹窗、下拉菜单等交互组件的实现
• 确保无障碍 —— 让应用对所有人友好，包括使用辅助设备的用户

什么时候用

搭建项目时 —— 确定组件结构、状态管理方案、目录组织

写新功能时 —— 不确定组件怎么拆、状态怎么设计最合理

遇到性能问题时 —— 页面卡顿、加载慢，需要优化方案

审查代码时 —— 检查代码是否符合前端最佳实践

学习时 —— 了解 React/Next.js 生态中常用的设计模式

主要覆盖哪些场景

1. 组件设计
   • 组合优于继承，通过 props 和 children 灵活组合
   • 复合组件模式，让多个相关组件协同工作
   • 自定义 Hooks，把可复用的逻辑抽离出来
   • 错误边界，捕获子组件的错误，防止整个应用崩溃
2. 状态管理
   • 简单场景用 React 自带的 useState、useReducer
   • 复杂场景用 Context + Reducer 或第三方库（如 Zustand）
   • 数据获取和缓存，用 SWR 或 React Query 等工具
   • 状态提升和传递，找到最合适的数据存放位置
3. 性能优化
   • 使用 useMemo、useCallback 减少不必要的计算和渲染
   • React.memo 包裹纯展示组件，避免父组件更新时也跟着渲染
   • 代码分割和懒加载，按需加载页面和组件
   • 虚拟列表，只渲染可见区域的内容，处理大数据量列表
4. 表单处理
   • 受控组件模式，表单数据由 React 管理
   • 表单校验，实时提示错误信息
   • 表单数据的收集和提交
5. 动画效果
   • 列表项的添加、删除动画
   • 弹窗、抽屉等组件的展开收起动画
   • 滚动动画、页面过渡效果
6. 无障碍访问
   • 键盘导航支持，所有功能都能用键盘操作
   • 焦点管理，弹窗打开时自动聚焦、关闭时回到原位
   • 语义化标签，让屏幕阅读器正确理解页面结构

怎么用

设计组件时 —— 告诉它"我要做个某某功能"，它会建议组件拆分方案

不确定怎么写时 —— 问它"这个场景用 useState 还是 useReducer？"

优化性能时 —— 说"页面有点卡"，它会帮你分析可能的原因和解决方案

处理复杂交互时 —— 问它"这个下拉菜单怎么实现最合理？"

核心原则

做前端开发时，记住这几条原则：

1. 组件职责单一 —— 一个组件只做一件事，复杂功能拆成小组件
2. 状态就近管理 —— 数据放在离使用它最近的地方，不要过度全局化
3. 性能优先 —— 用户感受得到卡顿，优化要有数据支撑
4. 可复用优先 —— 提取公共逻辑，避免重复造轮子
5. 用户体验 —— 动画要流畅，交互要自然，无障碍不能少

适用场景

• React/Next.js 项目的前端开发
• 组件库的设计和开发
• 前端性能优化
• 复杂交互功能的实现
• 前端代码审查
• 学习前端最佳实践

不适用场景

• 后端开发（如 API 设计、数据库操作）
• 移动端原生开发（如 iOS、Android 原生）
• 纯视觉设计（如 Figma 设计稿）
• 非 React 技术栈（如 Vue、Angular 虽然思路通用，但主要针对 React）