react-troubleshooting

name	react-troubleshooting
description	前端缺陷定位、重构与代码审查的规范流程。按问题分级定位根因，输出 Before/After 对照与防复发建议。触发场景：Bug 修复、性能优化、代码审查、架构重构。

前端缺陷定位与重构审查

目标

把"这里有问题"变成"根因 + 修复 + 防复发"的可审查产出。定位优先于修改，证据优先于猜测。

工作流

模式 A：缺陷定位（BugFix）

1. 收集复现步骤、期望行为与实际行为
2. 定位根因：从渲染链路（props → state → effect → render）逐层排查，用日志/断点/最小复现确认
3. 输出：根因说明 + 修复代码 + 修复前后对照
4. 防复发：说明为什么这次会引入该缺陷，建议什么规则/测试能拦住

模式 B：重构优化

1. 分析现有代码，列出问题清单（按影响排序）
2. 提出重构方案：Before/After 对照，说明每处改动的收益
3. 输出重构后完整代码
4. 说明改进点与潜在风险（行为是否保持等价）

模式 C：代码审查

1. 逐文件审查，问题分级：🔴 严重（缺陷/安全）/ 🟡 建议（可维护性）/ 🟢 风格
2. 每个问题附：描述 + 改进方案 + 示例代码
3. 输出审查总结报告（问题数、按文件分布、优先修复清单）

质量基线

• 修复必须可验证：能跑的最小复现或测试用例优先
• 禁止"看起来对了"的修复：每个修改说明因果
• 涉及性能时给出可测量的证据（耗时、渲染次数），无证据不定性
• 安全相关问题（注入、越权、敏感信息）同时参考 code-safety-audit 与 web-security-audit

输出规范

• 根因/问题清单先行，修复方案随后
• Before/After 用代码块对照
• 结尾附防复发建议与待验证项