用途:为 React/TypeScript 应用提供一套前端开发规范,统一项目结构、组件写法、状态管理、性能优化与测试方式。
主要能力:
- 项目结构:按 features 组织(auth、dashboard、settings 等),并区分共享 components(ui、layout)、hooks、utils、types、api、styles。
- 组件模式:函数组件配合 TypeScript Props 接口;用 Suspense 处理数据获取,useSuspenseQuery 自动挂起;用 lazy 与 Suspense 做路由懒加载。
- 状态管理:本地状态用 useState;服务端状态用 TanStack Query 的 useQuery/useMutation,并在成功后 invalidateQueries;全局状态用 Zustand 或 Context。
- 样式:Tailwind CSS 为主,必要时用 CSS Modules 或 styled-components/Emotion。
- 性能优化:useMemo、useCallback、memo 做记忆化;按路由或组件做代码分割;用 @tanstack/react-virtual 实现虚拟列表。
- TypeScript:定义 Props、API 响应与工具类型,处理严格空值检查。
- 错误处理:使用 react-error-boundary 的 ErrorBoundary 与 FallbackComponent。
- 测试:用 @testing-library/react 做组件测试与 Hook 测试(renderHook、act)。
使用方式:资料未提供安装命令或调用方式,仅给出规范内容与示例代码;详细模式见 component-patterns.md、state-management.md、performance.md、testing.md。
适用场景:React/TypeScript 前端项目的开发规范制定与代码审查。
限制:资料未说明收费、价格、平台支持范围及实际效果,相关事实暂未提供。