React 组件组合架构官方指南

Vercel 官方推荐的 React 组件组合模式，解决 boolean prop 泛滥问题，提供 compound components、state lifting 等可扩展架构方案，含 React 19 新 API 指引。

基本信息

• 技能名称?Vercel Composition Patterns
• 中文名称?React 组件组合架构官方指南
• 作者?ktaesthetix
• 分类?其他
• 版本?1.0.0
• 标签?react, component-architecture, design-patterns, vercel, frontend, typescript, composition-patterns, state-management

使用方法

使用说明
核心用法
本 Skill 提供 React 组件组合模式体系，用于构建灵活、可维护的组件架构。核心解决三大痛点：

1. Boolean Prop 泛滥 ：通过组合模式替代 isOpen 、 hasHeader 等条件渲染 props
2. 组件库 API 设计 ：建立 compound components 模式，用显式变体组件替代配置式 props
3. 状态管理解耦 ：将状态提升至 Provider 层，实现兄弟组件间状态共享
   四大规则类别
   | 优先级 | 类别 | 关键规则 | |--------|------|---------| | HIGH | Component Architecture | avoid-boolean-props、compound-components | | MEDIUM | State Management | lift-state、context-interface | | MEDIUM | Implementation Patterns | explicit-variants、children-over-render-props | | MEDIUM | React 19 APIs | no-forwardref（使用 use() 替代 useContext） | 典型应用场景
   重构拥有 5+ boolean props 的臃肿组件
   设计可扩展的 UI 组件库（如 Tabs、Modal、Accordion）
   实现依赖注入式的状态共享架构
   显著优点
   来源权威性 ：Vercel 官方出品，与 Next.js 生态深度契合
   工程可扩展性 ：模式经过大型项目验证，AI 代理和人类开发者均易理解
   React 19 前瞻 ：涵盖 use() hook、ref 传递新范式等最新 API
   优先级分层 ：HIGH/MEDIUM 分级指导，资源有限时聚焦架构层规则
   潜在局限
   版本锁定 ：React 19 专属规则对存量 React 18 项目直接不可用
   学习曲线 ：compound components 模式对初级开发者需要适应期
   迁移成本 ：重构 boolean props 为组合模式需改动调用方代码
   生态依赖 ：部分模式（如 Context Provider 嵌套）在极端复杂场景可能影响性能
   适合人群
   构建设计系统或组件库的前端工程师
   负责重构遗留 React 代码库的 Tech Lead
   使用 Next.js App Router 的全栈开发者
   需要统一团队组件架构规范的中大型团队
   常规风险
   S 级安全 ：纯编码规范类 skill，无网络请求、代码执行或数据敏感操作
   规则文件需配合项目实际技术栈选用，盲目应用 React 19 规则至旧版本将导致构建失败
   建议配合 TypeScript 使用以获得完整的类型推导收益