没计划地重构 React 组件，结局通常是一个 400 行的重写，外加两个没人看得懂的测试挂掉。下面这 13 个 Prompt 强制模型先点名具体异味（prop drilling、超长组件、误用 memo、server / client 混淆、effect 滥用），再给出”最小可行改动”和取舍——动手之前先讲清楚。要更通用的重构套路，配合 通用重构 Prompt 一起用。
太长不看
- 让模型先诊断、再重写。下面每个 Prompt 都要求先说异味和最小改动。
- 2026 年最大的变化：React Compiler 1.0（2025 年 10 月稳定；在 Next.js 16 里已转正为稳定特性，但仍是可选项、默认关闭）在构建期自动插入相当于
useMemo、useCallback、React.memo的优化。如果你的项目开了reactCompiler: true，memo 类 Prompt 应该先问一句：这个手写 memo 还有必要吗？ - App Router 里默认用 Server Component，只有需要 state、effect、事件处理或浏览器 API 时才加
"use client"。 - 截至 2026 年 6 月，做这件事最好的模型：Claude Opus 4.7（SWE-bench Verified 87.6%）或 Sonnet 4.6 做快速迭代，跑在 Claude Code 或 Cursor 里；GPT-5.5 适合当第二意见。请粘贴真实组件，别给改写过的版本。
这套 Prompt 适合用在哪
- 生产 React 代码库（React 19.x）
- Next.js 16 App Router 与 Astro 混合项目
- 上线前性能修复
- 加测试前准备
- 抽组件库
用哪个模型、在哪跑
| 配置 | 为什么 | 截至 2026 年 6 月 |
|---|---|---|
| Claude Opus 4.7 + Claude Code | SWE-bench Verified 最高（87.6%）；能读整棵文件树并原地改 | Max $100/$200；Pro $20 自带 Claude Code |
| Sonnet 4.6 + Cursor | 快、便宜，适合反复迭代；1M token 上下文 | Cursor Pro $20，可跑 Sonnet 4.6 / Opus 4.7 / GPT-5.5 |
| GPT-5.5（ChatGPT Plus） | 边界判断纠结时拿来做第二意见 | Plus $20；应用内上下文约 320 页 |
跨多个文件的代理式重构，每个 Prompt 都把范围收窄——如果代理开始重写半个 App，看 为什么 Claude Code 重构范围会失控。
1. 异味识别
下面是 React 组件。请按优先级列 top 5 异味：每条说明问题、为什么生产环境会
出问题、最小修复。先别重写。
[粘贴组件]2. 抽自定义 hook
下面组件 UI 与逻辑混在一起。请把逻辑抽成自定义 hook。输出：(a) hook + 它的
API；(b) 简化后的组件；(c) hook 明确不负责什么；(d) hook 文件放哪里。
[粘贴]3. 状态提升 / 下钻 重构
下面两个兄弟组件通过 3 层 prop drilling 共享状态。请提议正确的状态放置点：
local / lifted / context / 外部 store。从 re-render 成本与归属清晰度论证。
[粘贴]4. Server vs Client 拆分（Next.js 16 App Router）
下面是混了 server 取数与 client 交互的 App Router 组件。请拆成 server 边界 +
client 边界。输出：(a) 哪个文件加 "use client"；(b) 数据如何跨界传递；
(c) 什么不能跨边界（密钥与数据获取留在 server 端）。
[粘贴]5. useMemo / useCallback 正确性审计
下面组件用了 useMemo / useCallback。先告诉我这个项目有没有开 React Compiler
（除非我另说，默认按 Next.js 16 reactCompiler:true 处理）。如果开了，多数手写
memo 是冗余的，标出来建议删除。如果没开，逐处审计：(a) 真的需要 memo 吗；
(b) 依赖数组对吗；(c) 是否因引用导致 re-render。
[粘贴]6. React.memo 审计
下面：父 + 3 子，子用了 React.memo。如果开了 React Compiler，React.memo 通常
没必要——逐子说明。否则逐子检查：(a) memo 是否真省了渲染；(b) props 是否
稳定；(c) 函数 / 对象 prop 是否打破 memo。删除无效 memo，只在可度量有用时加
equality fn。
[粘贴]7. useEffect 简化
下面组件有 [N] 个 useEffect。每个判定：(a) 必要 vs 应改成「渲染期计算的派生
状态」/ 事件处理 / 外部 store；(b) 有没有竞态；(c) 替代方案。请套用「You Might
Not Need an Effect」的规则，目标至少减半。
[粘贴]8. 表单控件重构
下面表单有 [N] 个受控输入。请重构：(a) 一致的 change handler 模式；(b) 校验
位置（按字段 vs Zod schema）；(c) 异步提交生命周期；(d) 可访问性（label、
aria-invalid、焦点管理）。给前后对比。
[粘贴]9. Render-prop / HOC 迁移到 hook
下面组件使用 render-props 或 HOC。请迁移到自定义 hook。输出：(a) hook；
(b) 新组件；(c) 使用方需变更的位置。
[粘贴]10. 长组件拆分
下面是一个 [N] 行组件。请提议合理拆分。每个拆分给：名字、它拥有的 props、
内部保留什么。避免过度抽象——每个拆分都要给真实理由，而不是「它太长了」。
[粘贴]11. Context vs Store 决策
下面组件用 React Context 共享 [state]。请评估：(a) Context 合适，还是
Zustand / Jotai / Redux Toolkit；(b) re-render 成本（Context 一变会让所有
consumer 重渲染）；(c) 哪些会迁移、哪些保留。给结论 + 迁移草图。
[粘贴]12. 可测试性重构
下面组件难以测试。请重构提升可测试性：(a) 抽纯函数；(b) 隔离副作用；
(c) 替换不可 mock 的部分。输出重构后组件 + 3 个用 React Testing Library +
Vitest 写的测试骨架。
[粘贴]13. Suspense / Error Boundary 放置
下面是含异步数据的组件树。请提议 Suspense 与 Error Boundary 的放置位置。
输出：带边界标注的树状图，每处给一行理由。
[粘贴]容易踩的坑
- 直接重写而不是重构——会丢掉那些没人写注释的修复。
- 在已开 React Compiler 的项目里手动到处加
React.memo/useMemo/useCallback——编译器已经做过了，手写 memo 反而可能和它打架。 - 过度拆成 6 个小组件，其实 2 个就够——过早抽象比保留异味更糟。
- 两个兄弟一旦要共享状态就立刻丢全局 store。先提升，需要时再上 Zustand。
- App Router 里不讨论 server / client 边界，然后被
"use client"级联连锁坑掉一天。 - 用另一个
useEffect替换useEffect——其实应该在渲染期算派生状态，或把逻辑挪到事件处理里。
常见问题
2026 年还需要 useMemo 和 useCallback 吗？
大多数情况不需要——前提是你的项目跑着 React Compiler 1.0（2025 年 10 月稳定；在 Next.js 16 里已转正为稳定特性，但仍是可选项、默认关闭，需通过 reactCompiler: true 开启）。编译器在构建期分析组件树，自动插入相当于 useMemo、useCallback、React.memo 的优化；被优化的组件会在 React DevTools 里显示一个「Memo」标记。没开编译器的项目，这些手写 hook 仍然重要——所以 Prompt 5 和 6 都让模型先确认配置。
React 重构该用哪个模型？
截至 2026 年 6 月，Claude Opus 4.7 在 SWE-bench Verified 上以 87.6% 领先，Sonnet 4.6 是更快更便宜的主力；两者都能在 Claude Code 和 Cursor 里跑。GPT-5.5 适合在边界判断纠结时做第二意见。跨多文件的重构在代理（Claude Code 或 Cursor）里跑，让它能读相邻文件，但每个 Prompt 只聚焦一个异味。
怎么让 AI 别把整个组件重写一遍？
这里每个 Prompt 在诊断阶段都以「先别重写」收尾，或者要求给出最小改动。先跑异味识别（Prompt 1），挑一个异味，再跑对应的针对性 Prompt。如果代理还是越界，就收紧它的指令和范围。
「You Might Not Need an Effect」这条规则是什么？
如果一个值能从现有 props 或 state 算出来，就在渲染期直接计算，而不是用 useEffect 去同步它。Effect 是用来和外部系统（网络、DOM、订阅）同步的，不是用来派生状态的。Prompt 7 就直接套用了这条。详见下方 React 官方指南。