名称: react-composition-patterns 描述: 可扩展的 React 组合模式。适用于重构具有布尔属性泛滥的组件、构建灵活的组件库或设计可复用的 API。触发涉及复合组件、渲染属性、上下文提供者或组件架构的任务。包括 React 19 API 变更。 许可证: MIT 元数据: 作者: vercel 版本: ‘1.0.0’
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- 使用 children 进行组合而不是 renderX 属性
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