React 组合模式
用于构建灵活、可维护的 React 组件的组合模式。避免通过使用复合组件、提升状态和组合内部实现来导致布尔型 props 泛滥。这些模式使代码库在扩展时更容易被人类和 AI 代理处理。
何时应用
在以下情况下参考这些指南：
- 重构包含许多布尔型 props 的组件时
- 构建可重用的组件库时
- 设计灵活的组件 API 时
- 审查组件架构时
- 使用复合组件或 Context 提供者时
按优先级划分的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 组件架构 | 高 | architecture- |
| 2 | 状态管理 | 中 | state- |
| 3 | 实现模式 | 中 | patterns- |
| 4 | React 19 API | 中 | react19- |
快速参考
1. 组件架构 (高)
architecture-avoid-boolean-props- 不要添加布尔型 props 来自定义行为；应使用组合architecture-compound-components- 使用共享 Context 构建复杂组件
2. 状态管理 (中)
state-decouple-implementation- Provider 是唯一知道状态管理方式的地方state-context-interface- 定义包含状态、动作、元数据的通用接口，用于依赖注入state-lift-state- 将状态提升到 Provider 组件中，以便兄弟组件可以访问
3. 实现模式 (中)
patterns-explicit-variants- 创建显式的变体组件，而不是使用布尔模式patterns-children-over-render-props- 使用 children 进行组合，而不是使用 renderX 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