第 1 章 · 组件拆分与生产级代码
考点梳理
1.1 组件拆分 3 问（“评审高频追问”）
① 能否复用？ → 拆不出复用部分 = 粒度错了（太大或太碎）
② 状态放哪？ → 局部：useState；共享：Context/状态库（Redux/Zustand）
③ Props 怎么定？ → 最小接口（别把整个对象塞进去）
好拆分 vs 坏拆分（高频对比）：
| 坏拆分 | 问题 | 好拆分 |
|---|---|---|
MeetingPage.tsx（2000 行） | 一个组件管所有状态 | MeetingPage → UploadZone / TranscriptPanel / TodoList / ErrorBanner |
<Card data={entireApiObject} /> | Props 过大 | <Card title={...} onRetry={...} />（最小接口） |
记忆锚：“复用/状态/Props 三问，2000 行组件 = 不及格”。
1.2 状态管理（“3 档”）
| 档 | 方案 | 适用 |
|---|---|---|
| 局部 | useState / useReducer | 单个组件内部（如"输入框内容"） |
| 共享（轻） | Context | 跨组件少量共享（如"用户信息/主题"） |
| 共享（重） | 状态库（Zustand/Redux） | 复杂全局状态（如"任务队列/流式结果"） |
AI 产品的典型状态（“必会”）：
const [phase, setPhase] = useState<'idle'|'uploading'|'streaming'|'done'|'error'>('idle')
const [transcript, setTranscript] = useState('') // 流式累加
const [errorMsg, setErrorMsg] = useState('') // 失败原因
记忆锚：“局部 useState，轻量 Context，复杂上状态库；AI 状态用 phase 枚举”。
1.3 性能（“3 个核心指标”，Core Web Vitals）
| 指标 | 含义 | 目标值（示例） |
|---|---|---|
| LCP（Largest Contentful Paint） | 最大内容渲染时间 | < 2.5s |
| INP（Interaction to Next Paint） | 交互响应时间 | < 200ms |
| CLS（Cumulative Layout Shift） | 布局偏移（页面跳动） | < 0.1 |
前端性能 3 招（“3 招”）：
- 代码分割：
lazy()+ 路由级/组件级分包（“首屏只加载首屏”）； - 图片/资源：
loading="lazy"+ 正确尺寸 + 现代格式（“别传 4K 原图”）； - 长任务拆分：大计算用 Web Worker/分片（“别让主线程卡 5 秒”）。
记忆锚：“LCP 2.5、INP 200、CLS 0.1；分包懒图拆长任务”。
1.4 无障碍（“4 项”）
| 项 | 要点 | 检查方式 |
|---|---|---|
| 语义 | 用 button 不用 div onClick；label 关联输入 | 读屏软件/键盘走一遍 |
| 焦点 | 焦点可见（:focus-visible）+ 顺序合理 | 只用 Tab 键走全流程 |
| 对比 | 文本对比度 ≥ 4.5:1（大字号 3:1） | 对比度工具 |
| 键盘 | 所有交互可键盘完成（含 AI 停止/重试） | 不碰鼠标走一遍 |
记忆锚：“语义焦点对比键盘，4.5:1 是线”——“AI 产品的停止/重试按钮必须可 Tab 到达”。
🧠 记忆工具箱
口诀速记
- 拆分：“复用状态 Props 三问，2000 行组件不及格”；
- 状态：“局部 useState，轻量 Context，复杂上库；phase 枚举管 AI”；
- 性能：“LCP 二点五 INP 二百 CLS 零点一”；
- 无障碍：“语义焦点对比键盘，四点五是线”。
场景锚点
- 组件拆分想象"“乐高”"：你不是玩家（不需要拼成品），你是"设计零件的人"（“拆”）——“一块 2000 行的大积木 = 没法复用、没法测试、没法维护”；“拆成小零件 = 能复用（别的页面也能用）、能单独测（单测）、能换（换 UploadZone 不影响 TodoList）”——“乐高为什么强？因为零件标准化”。
⚠️ 易错提醒
- “AI 生成能跑” ≠ “生产级”：“生产级 = 组件拆分 + 状态清晰 + 错误处理 + README”——“评审看的是’第二个人能不能接手’”；
- 状态"全塞 Context" = 反模式：“大量状态进 Context = 每次变更全组件重渲染”——“共享状态要克制”；
- 性能"只优化首屏"不够：“INP 看交互”（“AI 流式输出时打字不能卡”）；
- 无障碍"停止按钮"：“AI 流式的停止/重试必须键盘可达”（“只用鼠标能点到 = 不合格”）。