SuperAPI AI 工具集

react-patterns

前端与建站

查看项目

更新于 10-16 00:03

技能介绍

React Patterns 提供现代 React 模式的专家指导,核心哲学强调组件组合、关注点分离、显式优于隐式、性能与无障碍。

用途:在实现 React 组件、设计组件 API、管理状态或优化渲染时参考。

主要能力: 组件组合模式:复合组件(Accordion、Tabs、Menu)、Render Props、高阶组件(withAuth、withLoading)。 自定义 Hooks:useApi、useForm、useDebounce、usePrevious、useLocalStorage。 状态管理:useState 用于简单 UI 状态;useReducer 用于复杂逻辑;Context 用于主题、认证等全局设置;URL 状态用于可分享筛选;服务端状态用 React Query/SWR;全局存储用 Zustand/Redux。 性能优化:useMemo 处理昂贵计算,useCallback 处理传给 memo 子组件的函数,memo 用于纯组件;代码分割支持路由级 lazy(() => import('./pages/Dashboard'))、组件级与条件加载,并需用 <Suspense> 包裹。 错误处理:错误边界处理组件树错误,try/catch 处理异步与事件,React Query onError 处理 API 错误。 无障碍:焦点管理、键盘导航、ARIA 标签、语义化 HTML。

使用方式:按需查阅对应模式与示例,遵循最佳实践清单,如逻辑复用或超过 20 行时提取自定义 hook、保持组件小于 200 行、状态就近放置、隔离测试 hooks。

限制:资料未提供具体安装命令、收费信息或平台支持细节;完整代码示例需查看 references/examples.md。