用途
frontend-patterns 是一份前端开发模式参考，聚焦 React、Next.js、状态管理、性能优化与 UI 最佳实践。它通过 TypeScript 代码示例展示常见问题的推荐写法，帮助开发者在构建现代前端界面时选择合适的设计模式。
主要能力
组件模式
- 组合优于继承：通过 Card、CardHeader、CardBody 等组合式组件示例说明如何用组合替代继承。
- 复合组件（Compound Components）：以 Tabs、TabList、Tab 为例，展示如何通过 Context 在父子组件间共享状态。
- Render Props：以 DataLoader 为例，展示如何将数据加载逻辑与渲染逻辑分离。
自定义 Hook 模式
- 状态管理 Hook：useToggle 示例。
- 异步数据获取 Hook：useQuery 示例，支持 onSuccess、onError、enabled 等选项与 refetch。
- 防抖 Hook：useDebounce 示例，用于搜索输入等场景。
状态管理模式
- Context + Reducer：以 MarketContext 为例，展示 useReducer 与 Context 结合的状态管理方式。
性能优化
- 记忆化：useMemo 用于昂贵计算，useCallback 用于传给子组件的函数，React.memo 用于纯组件。
- 代码分割与懒加载：使用 lazy 与 Suspense 延迟加载重型组件。
- 长列表虚拟化：使用 @tanstack/react-virtual 的 useVirtualizer 渲染大量列表项。
表单处理模式
- 受控表单与校验：以 CreateMarketForm 为例，展示表单状态、错误状态与提交校验流程。
错误边界模式
- ErrorBoundary 类组件示例，包含 getDerivedStateFromError、componentDidCatch 与降级 UI。
动画模式
- Framer Motion：使用 motion 与 AnimatePresence 实现列表动画与模态框动画。
无障碍模式
- 键盘导航：Dropdown 示例，处理 ArrowDown、ArrowUp、Enter、Escape 等按键。
- 焦点管理：Modal 示例，打开时保存并聚焦，关闭时恢复焦点。
使用方式
资料以代码片段形式呈现，每个模式均配有示例代码与用法注释。开发者可按需查阅对应章节，将示例代码作为实现参考。资料未提供安装命令、依赖版本或项目集成步骤。
适用场景
适用于使用 React 或 Next.js 构建前端界面的开发者，在需要设计组件结构、管理状态、优化渲染性能、处理表单、添加动画或提升无障碍体验时作为模式参考。
限制
资料未说明适用的 React 或 Next.js 版本、依赖包的具体版本要求、浏览器兼容性、性能基准数据或授权许可信息。部分示例（如 useQuery）为简化实现，未涵盖缓存、并发请求等完整场景。