# 前端规范

## 组件

- 一个组件一个职责
- 展示组件与容器组件分离
- props 用 TypeScript 定义
- 避免超过 200 行，超出则拆

## 状态

- 局部状态用 useState
- 跨组件用 Context 或状态库
- 服务端状态用 TanStack Query
- 避免把服务端数据放进全局 store

## 数据获取

- Next.js 优先 Server Components
- 客户端请求要有 loading / error / empty
- 请求失败要有重试或提示

## 表单

- React Hook Form + Zod
- 前端校验 + 后端校验
- 提交中禁用按钮
- 错误定位到字段

## 可访问性

- 语义化标签
- 图片有 alt
- 表单有 label
- 键盘可操作
- 颜色对比度达标

## 性能

- 图片用 next/image
- 路由级代码分割
- 长列表虚拟化
- 避免不必要的 re-render