# React Troubleshooting

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

- Skill: `rongxinzy/react-troubleshooting` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rongxinzy/react-troubleshooting`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rongxinzy/react-troubleshooting/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: rongxinzy (https://skillmd.com/u/rongxinzy)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rongxinzy/react-troubleshooting

---


# 前端缺陷定位与重构审查

## 目标

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

## 工作流

### 模式 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 用代码块对照
- 结尾附防复发建议与待验证项