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、actions、meta 的通用接口用于依赖注入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
局限性
- 仅当任务明确匹配上述范围时才使用本技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准,请停下并请求澄清。