用途
本技能是一份面向现代 React 开发的综合指南，重点包括基于 Suspense 的数据获取、懒加载、合理的文件组织以及性能优化。它提供了一套可执行的开发规范与检查清单，帮助开发者在 React/TypeScript 项目中保持一致的代码风格与架构模式。
主要能力
- 组件模式：使用 React.FC<Props> 保证类型安全，通过 React.lazy() 实现代码分割，使用 SuspenseLoader 处理加载状态，采用命名 const 加默认导出的模式。
- 数据获取：以 useSuspenseQuery 为主要模式，配合 Suspense 边界使用，采用缓存优先策略，替代 isLoading 检查，并通过泛型实现类型安全。API 服务层集中管理各功能的方法。
- 文件组织：区分 features/（领域特定）与 components/（真正可复用），功能目录下细分 api/、components/、hooks/、helpers/、types/ 子目录。
- 样式：少于 100 行使用内联样式，超过 100 行使用独立的 .styles.ts 文件；主要使用 MUI 的 sx 属性，并通过 SxProps<Theme> 保证类型安全。
- 路由：使用 TanStack Router 的基于文件夹的路由方式，懒加载组件，使用 createFileRoute，并在 loader 中提供面包屑数据。
- 加载与错误状态：关键规则是禁止提前返回（early return），以避免布局偏移；使用 useMuiSnackbar 进行用户通知，不使用 react-toastify。
- 性能优化：使用 useMemo 处理昂贵计算，useCallback 处理传递给子组件的事件处理器，React.memo 优化昂贵组件，防抖搜索（300-500ms），并在 useEffect 中清理以防止内存泄漏。
- TypeScript 标准：严格模式，不使用 any 类型，函数显式返回类型，使用 import type 导入类型，组件 prop 接口附带 JSDoc。
- 常见模式：涵盖 React Hook Form 与 Zod 验证、DataGrid 包装契约、Dialog 组件标准、useAuth 钩子以及带缓存失效的 mutation 模式。
使用方式
技能提供了快速上手清单，包括新组件检查清单和新功能检查清单。开发者可按清单逐步操作：创建组件时遵循 React.FC<Props> 模式、按需懒加载、使用 SuspenseLoader 包裹、使用 useSuspenseQuery 获取数据、使用导入别名（@/、~types、~components、~features）、根据样式行数决定内联或独立文件、使用 useCallback 处理事件处理器、默认导出置于底部、避免提前返回、使用 useMuiSnackbar 通知。创建新功能时，建立 features/{feature-name}/ 目录及子目录，创建 API 服务文件、TypeScript 类型、路由文件，懒加载功能组件，使用 Suspense 边界，并从功能 index.ts 导出公共 API。
技能还提供了导入别名速查表、常见导入速查表、现代组件模板（可直接复制），以及按主题划分的详细指南文件（component-patterns.md、data-fetching.md、file-organization.md、styling-guide.md、routing-guide.md、loading-and-error-states.md、performance.md、typescript-standards.md、common-patterns.md、complete-examples.md）。
适用场景
- 创建新组件或页面
- 构建新功能
- 使用 TanStack Query 获取数据
- 使用 TanStack Router 设置路由
- 使用 MUI v7 编写组件样式
- 性能优化
- 组织前端代码
- 遵循 TypeScript 最佳实践
限制
本技能为开发规范指南，不包含运行时依赖或自动化工具。具体项目配置（如 vite.config.ts 中的别名定义）需开发者自行设置。部分模式（如 useSuspenseQuery、TanStack Router、MUI v7）依赖相应库的特定版本。技能未提供关于收费、价格或平台支持的具体信息。