# 前端开发技能 ## 目的提供完整的前端开发专业知识，用于使用现代框架（React、Vue、Next.js）、全面的工具设置、状态管理模式、测试基础设施和性能优化策略构建生产就绪的 Web 应用程序。 ## 何时使用 * 从头开始构建新的 React、Vue 或 Angular 应用程序 * 设置现代前端工具（Vite、ESLint、Prettier、测试框架） * 使用 Redux Toolkit、Zustand 或 Context API 实现状态管理 * 使用令牌管理和受保护的路由配置身份验证流程 * 优化生产部署的捆绑包大小和性能 * 创建元件库和设计系统 * 设置综合测试（单元、集成、E2E） ## 快速入门 **在以下情况下调用此技能：** * 构建 React、Vue 或 Angular 应用程序 * 设置前端工具（Vite、ESLint、Prettier） * 实现状态管理（Redux Toolkit、Zustand、Context） * 配置认证流程 * 优化捆绑包大小和性能 * 设置测试（Vitest、Jest、Playwright） **请勿在以下情况下调用：** * 只需要后端 API → 使用后端开发人员 * 数据库优化 → 使用数据库优化器 * 仅 DevOps/部署 → 使用 devops-engineer * 无需代码的 UI/UX 设计 → 使用 ui-designer ## 决策框架 ### 框架选择前端框架选择 ├─ 新项目（绿地） │ ├─ 需要SEO + 服务端渲染 │ │ ├─ 团队了解 React → Next.js 14+ │ │ ├─ 团队了解 Vue → Nuxt.js 3+ │ │ └─ 团队灵活→ Next.js（生态系统优势） │ │ │ ├─ 无SSR要求的SPA │ │ ├─ React 体验 → React 18+ (Vite) │ │ ├─ Vue体验→Vue 3（Vite） │ │ └─ 企业/复杂表单 → Angular 15+ │ │ │ └─ 静态站点（博客、文档） │ └─ Astro、Next.js SSG 或 Vite + React │ └─ 现有项目 └─ 继续现有框架（一致性） ### 状态管理选择场景|图书馆 |捆绑尺寸 |使用案例 ---|---|---|--- 简单的本地状态 | useState、useReducer | 0 KB |组件级状态共享状态（2-3 个组件）|上下文 API | 0 KB |主题、身份验证、简单全局中等应用程序（<10 片）|祖斯坦| 〜1 KB |大多数应用程序，良好的 DX 大型应用程序（10+ 切片）| Redux 工具包 | ~11 KB |企业、时间旅行调试服务器状态| TanStack 查询 | ~12 KB | API数据、缓存 ### 造型方法造型决策 ├─ 快速原型设计 → Tailwind CSS ├─ 组件库→ Radix UI + Tailwind ├─ 动态主题 → CSS-in-JS（样式组件、情感） ├─ 大型团队 → CSS 模块或 Tailwind + 设计代币 └─ 性能关键 → 纯 CSS / SCSS ## 最佳实践 1. **使用功能组件** \- 现代React模式 2. **利用钩子** \- 尽可能避免类组件 3. **Memoize 昂贵的操作** \- 使用 useMemo、useCallback 4. **延迟加载组件** \- 减少初始包大小 5. **输入所有内容** \- 利用 TypeScript 6. **彻底测试** \- 单元、集成和端到端测试 7. **优化图像** \- 使用现代格式和延迟加载 8. **实现错误边界** \- 优雅地捕获错误 9. **使其易于访问** \- ARIA 标签、键盘导航 10. **监控性能** \- 跟踪核心网络生命 ## 常见模式 ### 自定义挂钩函数 useFetch(url: string) { const [数据，setData] = useState(空); const [正在加载，setLoading] = useState(true); const [错误，setError] = useState<字符串|空>(空); 使用效果（（）=> { 获取（网址） .then(res => res.json()) .then(设置数据) .catch(设置错误) .finally(() => setLoading(false)); }, [网址]); 返回{数据，加载，错误}； } ### 容器/演示 // 演示（愚蠢） const UserList = ({ users, onUserClick }: UserListProps) => (

onUserClick(user.id)}> {用户名}

）； // 容器（智能） const UserListContainer = () => { const { 用户， fetchUsers } = useUsers(); useEffect(() => fetchUsers(), [fetchUsers]); return ; }; ## 故障排除 ### 常见问题 **状态未更新** * 检查是否使用正确的设置器 * 验证useEffect中的依赖数组 * 确保组件重新渲染 **组件不重新渲染** * 检查是否有不必要的重新渲染 * 验证记忆功能是否正常工作 * 审查道具变更 **性能问题** * 使用 React DevTools 进行配置 * 检查大包尺寸 *审查不必要的重新渲染 * 实现代码分割 **测试失败** * 验证测试设置 * 检查模拟实现 * 查看异步处理 * 确保适当的清理 ## 质量检查表 ### 架构 * 框架选择合理 * 状态管理清晰（服务器与客户端状态分离） * 组件结构逻辑 * 实现代码分割 ### 代码质量 * 启用 TypeScript 严格模式 * ESLint + Prettier配置 * 存在关键路径测试 * 无支柱钻孔（使用状态管理） ### 性能 * 优化包大小（gzip 压缩后<200KB） * 记忆昂贵的操作 * 图片优化（延迟加载、WebP） * 第三方库评估 ### 测试 * 配置测试框架 * 测试关键路径 * 存在端到端测试 ### 安全 * 保护环境变量 * 输入净化 * 身份验证令牌安全 * 依赖关系审计 ## 集成模式 ### 反应专家 * **交接：**前端开发人员设置工具→反应专家实现复杂的组件逻辑 * **工具：** 均使用React；前端开发人员处理生态系统工具 ### nextjs-开发人员 * **交接：** 当需要 SSR/SEO 时 → 交接 Next.js 特定功能 * **工具：**前端开发者使用Vite/CRA； nextjs-developer 使用 Next.js App Router ### 后端开发人员 * **交接：**前端开发人员实现 API 客户端 → 后端开发人员提供 API 合约 * **工具：**前端开发人员使用 Axios/Fetch、TanStack Query ### 前端-ui-ux-工程师 * **交接：**前端开发人员设置组件结构 → frontend-ui-ux-engineer 样式 * **工具：** 均使用React； frontend-ui-ux-engineer 添加了 Framer Motion、Tailwind 设计令牌 ## 其他资源 * **详细技术参考** ：参见 [REFERENCE.md]() * **代码示例和模式**：请参阅 [EXAMPLES.md]()

前端开发技能

包含技能