Vercel 官方推荐的 React 组件组合模式，解决 boolean prop 泛滥问题，提供 compound components、state lifting 等可扩展架构方案，含 React 19 新 API 指引。
说明：
## 核心用法
本 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 使用以获得完整的类型推导收益
