React 前端开发规范

要解决的问题

生产级 React 代码库常出现三类漂移：数据获取被 isLoading 和手动 spinner 拆散，业务逻辑散落在 components/，性能默认值依赖个人经验。前端代码看起来能跑，但边界、类型和复用策略不一致，重构成本会逐步累积。

技能如何工作

frontend-dev-guidelines 把前端实现约束成一组可检查的工程规则：

• Suspense 优先：用 useSuspenseQuery 作为首要数据获取模式，避免提前返回、手动加载态和组件内 fetch 逻辑。
• 功能化结构：领域逻辑放在 features/，可复用原语放在 components/，每个功能维护自己的 API 文件。
• 严格 TypeScript：显式返回类型、import type、类型化响应，拒绝 any。
• 性能默认值：对昂贵派生使用 useMemo，对传入的处理函数使用 useCallback，对重型组件使用 React.memo，并清理 effect 以避免泄漏。

它还给出 FFCI 评分、组件检查清单和反模式列表，用于在实现前判断方案是否与当前架构、性能目标和维护成本匹配。

适用边界

该技能面向使用 React、TypeScript、Suspense、TanStack Router 和 MUI 的生产级前端项目。若项目尚未采用 Suspense 数据模型，或主要目标是快速原型验证，直接套用可能带来额外迁移成本；建议先从路由、数据获取和功能边界等核心规则逐步收敛。