用途:为大型企业级 React 代码库提供可扩展、可维护的架构原则,适用于设计或评审组件层级、为新功能或页面组织目录、拆分大型组件、在本地/全局/服务端状态间做选择、应用组合模式(插槽、复合组件、children)、用自定义 Hook 抽取逻辑、执行同址托管与 Feature-Sliced Design 边界、审查命名与导入策略、制定测试策略。
核心规则(15 条,被视为大规模项目不可协商):领域驱动同址托管,仅当代码被三个以上独立领域使用才提升到全局;严格分层依赖 App > Pages > Widgets > Features > Entities > Shared,只允许向下导入;每个目录用 index.ts 暴露公共 API,外部不得直接导入内部文件;状态逻辑与副作用抽入单一职责 Hook;组件超过 200 行视为架构失败;优先组合而非逐层传参;使用 @/ 绝对导入别名,禁止深层相对路径;TypeScript 严格模式、禁止 any、外部数据在边界用 Zod 之类运行时校验;远端数据统一用 TanStack Query 并配合 Query Key Factory;内部事件函数用 handle 前缀、对外事件 prop 用 on 前缀;仅在作为依赖或记忆化组件 prop 时才用 useCallback/useMemo;文件与目录用 kebab-case;优先语义标签并做可访问性检查;用 React Testing Library 写模拟用户交互的集成测试,不测内部状态或私有方法;状态尽量就地放置,必要时下推而非上提全局。
决策参考:组件健康度关注长度、逻辑、props、渲染、样式;状态类型上本地用 useState/useReducer,服务端用 TanStack Query/SWR,全局 UI 用 Zustand/Redux Toolkit,持久化用 LocalStorage 加自定义 Hook;测试金字塔为单元(Vitest/Jest,高频)、集成(RTL,中频)、端到端(Cypress/Playwright,低频)。
用法:按资料给出的流程拆分大组件、按目录结构组织新功能、按消费者数量提升共享代码、应用插槽与复合组件模式。完整参考见 references/architecture-guidelines.md。限制:资料未提供安装命令、示例工程起手步骤、框架集成细节、性能基准或版本兼容说明,这些内容暂未提供。