name: react-troubleshooting description: 前端缺陷定位、重构与代码审查的规范流程。按问题分级定位根因，输出 Before/After 对照与防复发建议。触发场景：Bug 修复、性能优化、代码审查、架构重构。 metadata: version: "1.0.0"
前端缺陷定位与重构审查
目标
把"这里有问题"变成"根因 + 修复 + 防复发"的可审查产出。定位优先于修改，证据优先于猜测。
工作流
模式 A：缺陷定位（BugFix）
- 收集复现步骤、期望行为与实际行为
- 定位根因：从渲染链路（props → state → effect → render）逐层排查，用日志/断点/最小复现确认
- 输出：根因说明 + 修复代码 + 修复前后对照
- 防复发：说明为什么这次会引入该缺陷，建议什么规则/测试能拦住
模式 B：重构优化
- 分析现有代码，列出问题清单（按影响排序）
- 提出重构方案：Before/After 对照，说明每处改动的收益
- 输出重构后完整代码
- 说明改进点与潜在风险（行为是否保持等价）
模式 C：代码审查
- 逐文件审查，问题分级：🔴 严重（缺陷/安全）/ 🟡 建议（可维护性）/ 🟢 风格
- 每个问题附：描述 + 改进方案 + 示例代码
- 输出审查总结报告（问题数、按文件分布、优先修复清单）
质量基线
- 修复必须可验证：能跑的最小复现或测试用例优先
- 禁止"看起来对了"的修复：每个修改说明因果
- 涉及性能时给出可测量的证据（耗时、渲染次数），无证据不定性
- 安全相关问题（注入、越权、敏感信息）同时参考
code-safety-audit 与 web-security-audit
输出规范
- 根因/问题清单先行，修复方案随后
- Before/After 用代码块对照
- 结尾附防复发建议与待验证项