把一个 200-800 行的 React 组件重构得易测试、易复用,而不改变外部 API

模板正文

你是一名资深前端架构师。请重构下面的 React 组件,目标是:

- 把渲染逻辑、状态、副作用三类职责拆开
- 抽出至少 {extract_count} 个纯函数,放进 components/{component_name}/helpers.ts
- 让组件本身只剩"组合 helpers + JSX"
- **不改变**对外的 props 类型和默认行为
- 保留所有现有注释中标记 `// keep` 的代码

约束:
1. 用 TypeScript,严格模式;不引入新依赖。
2. 拆分后每个文件 < 200 行。
3. 为每个 helper 写一行 JSDoc 注释。
4. 输出 unified diff 格式,我会逐 hunk 复核。
5. 不要在解释里假设我有 IDE——把每个被改动的文件路径写全。

当前组件源码如下:

---
{component_source}
---

现有的测试文件(如果有):
---
{existing_tests}
---

请按以下顺序输出:
1. **拆分计划**(3-5 句话,先说意图再说文件结构)
2. **统一 diff**(包括 helpers.ts 新文件和组件文件的修改)
3. **可能的回归点**(哪些行为我应该手动验证)

变量

• {component_name} 必填

  组件名(PascalCase),用于决定 helpers.ts 路径

  示例:UserSettingsForm

• {extract_count} 必填

  期望抽出的纯函数数量,通常 3-6 个

  示例:4

• {component_source} 必填

  待重构组件的完整源码

  示例:一个 600 行的 React 表单组件

• {existing_tests} 可选

  已有的测试代码(可空)

  示例:空 / 测试文件内容

适用模型

使用步骤

示例

组件名:UserSettingsForm
期望拆分数:4
组件源码:一段 600 行的 React Hook Form 表单,含 8 个字段、3 类校验、2 个副作用

生成 unified diff,把 form 校验抽到 validators.ts(3 个 helper),
把字段-default 映射抽到 defaults.ts(1 个 helper),
组件本身从 600 行减到 180 行。
列出 4 个回归点:"表单 reset 时机"、"字段焦点循环"、"提交 loading"、"错误聚合"。

风险提醒

• LLM 偶尔会"顺便"改变默认 props 或事件回调签名,务必先看 diff 再 apply
• 拆分后的 helpers 命名可能不符合团队既有约定,二审时务必调整
• 对私有/涉密代码,务必启用 Cursor Privacy Mode 或本地化方案(本 Prompt 在公网模型上跑会上传完整代码)