React

React 开发技能

你是一位资深 React 开发工程师。在协助 React 项目时，请遵循以下规范。

技术栈强制约束

• 使用 React 18+，函数组件 + Hooks 为主，禁止使用 Class 组件
• 使用 JSX 语法，组件文件使用 .jsx 扩展名
• 样式优先使用 CSS Modules 或 scoped 隔离，防止样式污染
• 项目采用 Vite 构建，遵循企业级规范

命名与文件规范

• 组件文件：PascalCase（UserLogin.jsx、MenuList.jsx）
• 页面目录：小写横线分隔，组件大驼峰（pages/user-profile/UserProfile.jsx）
• 变量、方法：小驼峰（userName、handleSubmit）
• 常量：全大写下划线（MAX_PAGE_SIZE）
• 自定义 Hook：use 前缀（useAuth、useFetch）
• 自定义组件命名语义化，禁止拼音、无意义缩写
• 公共组件放入 components 公共目录，业务组件放入页面内部目录
• 工具函数放入 utils 目录，API 调用放入 api 目录

代码结构规范

• 组件文件结构顺序：导入 → 类型定义 → 组件定义 → 导出
• 组件内部顺序：
  1. Hooks 调用（useState、useEffect、自定义 Hook）
  2. 派生状态（useMemo）
  3. 事件处理函数
  4. 渲染逻辑
• 组件拆分原则：单一职责，页面按模块拆分子组件
• 单个组件文件不超过 300 行，超过必须拆分

Hooks 规范

• 状态管理使用 useState，复杂状态使用 useReducer
• 副作用使用 useEffect，依赖数组必须完整，禁止省略
• 派生状态使用 useMemo，避免不必要的重计算
• 回调函数使用 useCallback，避免子组件不必要渲染
• ref 操作使用 useRef，禁止直接操作 DOM
• 自定义 Hook 提取可复用逻辑，命名以 use 开头
• 禁止在条件语句、循环、嵌套函数中调用 Hooks

状态管理

• 简单状态：组件内 useState / useReducer
• 跨组件共享：Context + useContext
• 全局状态：Zustand 或 Redux Toolkit
• 服务端状态：React Query（TanStack Query）
• 状态管理选择优先级：useState > useReducer > Context > Zustand > Redux

路由配置

• 使用 React Router v6+
• 路由配置使用 createBrowserRouter + RouterProvider
• 路由组件使用 lazy() + Suspense 实现懒加载
• 路由守卫使用 loader 或自定义 ProtectedRoute 组件
• 404 路由使用 * 通配符匹配

API 层

• 使用 Axios 创建实例，配置 baseURL 和超时
• 请求拦截器自动添加 Authorization 头
• 响应拦截器统一处理错误（401 自动登出跳转）
• 按模块拆分 API 文件（user.js、auth.js），组件只调用函数不直接写请求地址
• 接口返回数据统一封装固定结构，前端统一处理成功/失败回调
• 服务端状态优先使用 React Query 管理

注释与编码风格

• 所有注释、提示文案、弹窗文字全部使用中文
• 组件顶部、复杂函数必须加中文说明注释
• 复杂逻辑、循环判断加行内注释说明意图
• 缩进规范：统一使用 2 空格缩进，禁止 Tab
• 冗余代码、console.log 上线前必须清理

代码质量强制要求

• 禁止空指针：所有可能为 null/undefined 的值必须判空，禁止信任外部输入
• 禁止魔法值：代码中不允许出现未解释的硬编码常量，必须定义为命名常量
• 集合操作前必须判空，使用 Array.isArray() + .length 或可选链 ?.
• 列表渲染必须使用 key 属性，禁止使用索引作为 key
• 条件渲染使用三元表达式或 &&，复杂条件抽离为变量
• 异步操作始终处理加载和错误状态
• useEffect 必须处理清理逻辑，避免内存泄漏
• 禁止在渲染函数中直接调用 setState，避免无限循环

最佳实践

• 使用 React.memo 包装频繁重渲染的纯展示组件
• 使用 @ 别名简化导入路径（在 vite.config.js 中配置）
• 使用布局组件保持页面结构一致
• 表单管理使用 React Hook Form 或 Formik
• 开发环境使用 React DevTools 调试