名称: vercel组合模式 描述: 可扩展的React组合模式。在重构具有布尔属性泛滥的组件时使用， 构建灵活的组件库，或设计可重用的API。触发任务涉及复合组件、 渲染属性、上下文提供者或组件架构。包括React 19 API更改。 许可证: MIT 元数据: 作者: vercel 版本: ‘1.0.0’ 领域: 前端 触发词: React, 组合模式, 复合组件, 渲染属性, 布尔属性, 组件API, 上下文提供者, React组合, 可重用组件, 组件库 角色: 专家 范围: 实施 输出格式: 代码 相关技能: React专家, Vercel React最佳实践
React组合模式
用于构建灵活、可维护的React组件的组合模式。避免 布尔属性泛滥通过使用复合组件、提升状态和 组合内部组件。这些模式使代码库对人和AI代理 在扩展时更易于处理。
何时应用
参考这些指南当：
- 重构具有许多布尔属性的组件
- 构建可重用的组件库
- 设计灵活的组件API
- 审查组件架构
- 处理复合组件或上下文提供者
按优先级划分的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 组件架构 | 高 | architecture- |
| 2 | 状态管理 | 中 | state- |
| 3 | 实现模式 | 中 | patterns- |
| 4 | React 19 API | 中 | react19- |
快速参考
1. 组件架构（高）
architecture-avoid-boolean-props- 不要添加布尔属性来自定义行为；使用组合architecture-compound-components- 使用共享上下文构建复杂组件结构
2. 状态管理（中）
state-decouple-implementation- 提供者是唯一知道状态如何管理的地方state-context-interface- 定义具有状态、操作、元的通用接口，用于依赖注入state-lift-state- 将状态移动到提供者组件中以供兄弟组件访问
3. 实现模式（中）
patterns-explicit-variants- 创建显式的变体组件而不是布尔模式patterns-children-over-render-props- 使用子组件进行组合而不是渲染属性
4. React 19 API（中）
⚠️ 仅React 19+。 如果使用React 18或更早版本，跳过此部分。
react19-no-forwardref- 不要使用forwardRef；使用use()代替useContext()
如何使用
阅读单独的规则文件以获取详细解释和代码示例：
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
每个规则文件包含：
- 简要解释为什么重要
- 不正确代码示例及解释
- 正确代码示例及解释
- 附加上下文和参考文献
完整编译文档
完整指南，所有规则展开：AGENTS.md