3周重构20+核心模块：我是如何用Cursor把Class组件批量迁移到Hooks的

摘要：在做公司老的运营平台的治理项目中，我们面临大量历史Class组件冗余、维护成本高的问题。

本文复盘了如何利用Cursor/Copilot等AI工具，在3周内完成20+核心模块从Class到Hooks的批量迁移。

文章不讲虚的，重点分享可复用的Prompt策略、人机协作校验流程，以及那些AI“一本正经胡说八道”时踩过的坑。

为什么必须重构？不只是为了“新语法”

在接手公司老运营平台时，我发现一个典型痛点：

核心业务模块大多是3-6年前的Class组件，嵌套层级深、状态逻辑分散在多个生命周期里，新人上手改一个字段可能要读半天代码。

更致命的是，这些组件无法复用逻辑，相似功能在不同页面被复制粘贴了N遍。

团队评估后决定做Hooks迁移，但现实很骨感：

20+个核心模块、数万行代码，纯人工重构至少需要2个月，且容易引入回归Bug。

恰逢AI Coding工具成熟，我们决定试一条新路：

让AI当“初级重构工程师”，人来做“架构师+QA”。

最终结果：3周完成全部迁移，单元测试覆盖率从35%提升到82%，线上零故障。

下面拆解这套工作流。

第一步：制定Prompt策略，别让AI“自由发挥”

直接对AI说“把这个Class组件改成Hooks”是灾难的开始。

AI会忽略业务上下文、乱删副作用、甚至编造不存在的Hook。

我们总结出一套 “三段式Prompt模板”：

【角色与目标】
你是一个资深React重构专家。请将以下Class组件迁移为函数组件+Hooks，保持原有功能和UI行为完全一致。

【约束条件】
1. 禁止修改props接口和对外暴露的方法
2. componentDidMount中的副作用必须用useEffect精确依赖数组还原
3. 类方法中的this.state引用需转换为对应的useState/setState
4. 保留所有原有注释，并在关键转换处添加// AI-MIGRATED标记
5. 如果存在不确定的逻辑，用// TODO-AI-CHECK标注而非猜测

【输入代码】
[粘贴完整Class组件代码]

关键细节：

• 喂完整上下文：不要只贴当前文件，把关联的类型定义、自定义Hook、工具函数一起贴上，否则AI会自己造轮子。

• 强制标记：// AI-MIGRATED 和 // TODO-AI-CHECK 让人工Review时有明确锚点，效率提升50%以上。

• 分步执行：超过300行的组件，先让AI生成迁移方案（伪代码/思路），确认无误后再让它写实际代码。一步到位的代码质量显著低于分步验证。

第二步：人机协作校验流程，信任但要验证

AI生成的代码不能直接用，我们建立了 “三层校验机制”：

1. 静态检查层：ESLint + TypeScript编译必须零报错。AI常犯的错误包括：遗漏依赖项、错误解构props、类型断言滥用。这一层能过滤掉60%的低级问题。

2. 单元测试层：这是最关键的一环。我们要求先跑通旧组件的单测，再让AI基于同一套测试用例适配新组件。如果测试失败，把错误信息连同测试代码一起喂给AI修复，而不是自己手动改。这个过程本身就是在训练AI理解业务边界。

3. 视觉回归层：对于涉及UI的组件，用Storybook做并排对比。AI重构有时会意外改变渲染顺序或条件判断，肉眼Diff比代码Diff更可靠。

血泪教训：曾有一个表单组件，AI把componentDidUpdate里的防抖逻辑错误地放进了useEffect，导致每次渲染都重建定时器。

单测通过了（因为mock了timer），但实际操作时输入卡顿。

后来我们在Prompt里加了“副作用中的定时器/订阅必须用useRef持有引用”才根治。

第三步：避坑指南，AI重构的五个“不要”

1. 不要让AI一次性重构整个文件夹：上下文窗口有限，它会丢失跨文件依赖关系。按模块粒度逐个处理，每个模块独立验证。

2. 不要相信AI对业务逻辑的“优化建议”：它可能把必要的冗余判断当作“死代码”删掉。重构的目标是等价转换，不是智能优化。业务逻辑变更必须人来决策。

3. 不要跳过Git原子提交：每完成一个组件的重构就单独commit，附带单测通过截图。出问题时可以精准回滚，而不是在一堆混合改动里大海捞针。

4. 不要忽视AI的“幻觉API”：AI偶尔会使用不存在于当前React版本的Hook或第三方库方法。务必对照官方文档核实，尤其是较新的API。

5. 不要在疲劳时Review AI代码：AI生成的代码看起来“太正确了”，容易产生认知惰性。建议每天Review不超过5个组件，保持注意力阈值。

效能数据与反思

最大的收获不是速度，而是质量基线的提升。

AI倒逼我们把模糊的业务逻辑显式化为测试用例和Prompt约束，这本身就是对系统的深度理解。

重构结束后，这套Prompt模板和校验流程沉淀为团队规范，后续Vue3迁移项目也直接复用。

写在最后

AI不会替代工程师，但会重新定义“工程师该做什么”。

在这轮重构中，我的角色从“写代码的人”变成了“定义规则、验证结果、处理异常的人”。

AI负责体力活，人负责判断力——这可能是当下最务实的AI Coding落地姿势。

如果你也在面对遗留系统治理，不妨从小模块开始试一次。

记住：AI是你的实习生，聪明但需要你把关。

用好它，你能腾出时间去做真正有价值的事。

如果这篇对你有帮助，欢迎点赞收藏。

后续我会继续分享SSE流式引擎搭建、配置化卡片系统等实战内容，收藏网址不迷路。