44 lines
788 B
Markdown
44 lines
788 B
Markdown
# 前端规范
|
|
|
|
## 组件
|
|
|
|
- 一个组件一个职责
|
|
- 展示组件与容器组件分离
|
|
- 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
|