React Troubleshooting

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

rongxinzy 98e55ad 1.8 KB Updated

File contents

前端缺陷定位与重构审查

目标

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

工作流

模式 A:缺陷定位(BugFix)

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

模式 B:重构优化

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

模式 C:代码审查

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

质量基线

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

输出规范

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

rongxinzy/rongxinai/tree/main/SKILLs/zhiyuan-expert-manager/presets/react-dev/skills/react-troubleshooting commit 98e55ad8be

Frequently asked questions

npx skillmds@latest add rongxinzy/react-troubleshooting