Prompts-MCP 686 skills · ai / design / design-pattern / framework / fundamentals / habit / lang / tech-selection /mcp/sse
framework framework/react/reliability/index.md medium

framework-react-reliability-index

React 前端运行可靠性索引:异步竞态取消 / 副作用清理防泄漏 / 防重复提交 / chunk 加载恢复。Use when 写异步取数或表单提交 / 排查数据乱序或卸载报错 / 处理懒加载部署后白屏。

子项索引

子项 一句话
race-condition-cancellation skill 异步取数结果乱序覆盖的两种防护 — AbortController 真取消 / stale-result guard 忽略非最新响应
effect-cleanup-leak skill useEffect 副作用清理防泄漏 — 注册的监听/定时器/订阅/请求必须在 cleanup 里对称解除
prevent-double-submit skill 提交类操作前端防重复提交 — 用 isPending 锁住按钮 + 非幂等带 Idempotency-Key
chunk-load-recovery skill 部署新版后旧页面懒加载报 ChunkLoadError 白屏的恢复:contenthash 文件名 + 捕获 preloadError 重载 + sessionStorage 去重防死循环

React · 运行可靠性索引

本层包含

名称 类型 一句话
race-condition-cancellation skill AbortController / ignore 标志避免请求乱序覆盖
effect-cleanup-leak skill useEffect 清理订阅 / timer / listener 防卸载泄漏
prevent-double-submit skill 提交中态锁 + loading 禁用防重复提交
chunk-load-recovery skill ChunkLoadError 捕获重载防部署后白屏

何时下钻

  • 异步取数受快速切换 / 翻页影响导致结果乱序覆盖 → race-condition-cancellation.md
  • useEffect 里订阅、定时器、监听器、未取消请求,卸载后报 setState 警告 → effect-cleanup-leak.md
  • 表单 / 下单 / 支付按钮被连点造成重复请求 → prevent-double-submit.md
  • 部署新版本后旧页面点路由懒加载报 ChunkLoadError 白屏 → chunk-load-recovery.md

链接