SuperAPI AI 工具集

react-architectural-patterns

前端与建站

查看项目

更新于 10-16 00:06

技能介绍

用途:在 design-architect 或 code-developer 设计 React 19 组件架构时调用,提供架构规范参考。

主要能力: 组件类型分类:Server Components(React 19 默认,仅服务端渲染,可异步,不能使用 hooks 与浏览器 API,适合数据获取、直接访问后端资源、保留敏感信息、承载大型依赖);Client Components(需 'use client' 指令,可用全部 hooks、事件监听与浏览器 API,会增加客户端包体积)。 组合模式:优先组合而非继承,使用 children、复合组件、HOC、render props;状态管理建议状态上提、深层嵌套用 Context、全局状态用 Zustand、服务端状态用 React Query,并区分 UI 状态与服务端状态;数据流为单向自上而下,props 配置、回调向上通信、Context 隐式传参。 设计模式:Container/Presenter 分离数据获取与展示;自定义 Hook 以 use 前缀命名,单一职责,多值返回数组、具名值返回对象;Error Boundaries 包裹应用或路由段并提供回退 UI;Suspense Boundaries 处理异步加载状态,可嵌套实现细粒度加载。 代码组织:组件文件含主组件、样式、测试、Storybook 与 barrel 导出;按 feature 组织 components、hooks、types、utils 与 index;导入顺序为 React/框架、外部库、内部模块(@/ 别名)、相对导入、样式、类型导入。 性能:React.memo、useMemo、useCallback、动态导入代码分割、懒加载、长列表虚拟化;避免 JSX 内联函数、渲染中创建对象数组、Context 过度使用与未记忆化、未分析即优化。 无障碍:语义化 HTML、ARIA 标签、键盘导航、标题层级、色彩对比度、屏幕阅读器替代文本。

使用方式与限制:资料未提供具体安装命令、调用参数或示例代码,仅给出架构规范内容;实际调用方式暂未提供。