03 · 重构与代码审查

重构是 Claude Code 最能体现价值的场景之一。它能在几分钟内梳理出你看了半小时都没理清的依赖关系。

重构前先分析，不要直接改

错误做法：

帮我重构 UserDashboard.tsx

正确做法：先让 Claude 分析，你审查结论后再决定是否执行。

读 /src/components/UserDashboard.tsx，
分析这个组件主要存在哪些问题，并给出重构建议。

不要改代码，先列出分析结果。

看完分析，你再决定：接受哪些建议，拒绝哪些，然后让它执行。

常见重构场景

抽取子组件：

/src/pages/UserProfile.tsx 里有一个用户信息展示区域（大约 80-120 行）。
把它抽取成独立的 UserCard 组件，放到 /src/components/UserCard.tsx。
保持原来的功能不变，只做结构分离。

逻辑抽取为 Hook：

/src/components/ProductList.tsx 里有分页状态和分页逻辑（page, pageSize, 计算 total pages 等）。
把这部分抽取成 usePagination hook，放到 /src/hooks/usePagination.ts。
ProductList.tsx 改为使用这个 hook。

性能优化：

读 /src/components/DataTable.tsx，
找出所有会导致不必要重渲染的地方，
用 useMemo / useCallback / React.memo 修复。
每一处修改都要说明原因。

TypeScript 改造：

读 /src/utils/helpers.js，
把它转成严格 TypeScript，推断所有类型，不允许 any。
把它输出到 /src/utils/helpers.ts（原文件保留）。

用 Claude Code 做代码审查

提交 PR 前，让 Claude Code 帮你做最后检查：

审查 /src/components/PaymentForm.tsx，重点检查：

1. 安全问题：是否有 XSS 风险、敏感信息泄露
2. 错误处理：所有异步操作是否有 catch，错误是否传达给用户
3. 性能：是否有明显的无效渲染或重复计算
4. 可读性：变量名、函数名是否清晰

用列表输出，标明每个问题的严重等级（高/中/低）。

读 Diff 做审查

对于已有 git 历史的改动：

运行 git diff HEAD~1 -- src/
然后分析这次改动：做了什么、有没有风险点、有没有遗漏的地方。

Claude Code 会执行 git 命令，读取 diff 内容后给出分析。

增量重构策略

不要一次重构整个文件，把大重构拆成多个小步：

第一步：只把 UserDashboard.tsx 里的 API 调用逻辑移到 /src/api/user.ts，
其他都不动，确保功能不变。

每一步都可以跑测试验证，避免大范围改动引入未知问题。