react-composition-patterns

用途

React Composition Patterns 是一套面向 React 组件设计的组合模式指南，目标是帮助开发者构建灵活、可维护的组件。其核心理念是：通过复合组件（compound components）、状态提升（lifting state）和内部组合（composing internals）来避免布尔属性（boolean prop）泛滥。这些模式能让代码库在规模扩大时，更便于人类开发者与 AI 智能体理解和协作。

适用时机

当出现以下情况时，可参考本指南：

• 重构带有大量布尔属性的组件
• 构建可复用的组件库
• 设计灵活的组件 API
• 审查组件架构
• 使用复合组件或 Context Provider

规则分类与优先级

规则按优先级分为四类，每类带有前缀标识：

1. 组件架构（Component Architecture） — 优先级 HIGH，前缀 architecture-
2. 状态管理（State Management） — 优先级 MEDIUM，前缀 state-
3. 实现模式（Implementation Patterns） — 优先级 MEDIUM，前缀 patterns-
4. React 19 API — 优先级 MEDIUM，前缀 react19-

快速参考

1. 组件架构（HIGH）

• architecture-avoid-boolean-props：不要通过添加布尔属性来自定义行为，应使用组合。
• architecture-compound-components：使用共享 context 来组织复杂组件。

2. 状态管理（MEDIUM）

• state-decouple-implementation：Provider 是唯一知道状态如何管理的地方。
• state-context-interface：定义包含 state、actions、meta 的通用接口，用于依赖注入。
• state-lift-state：将状态移入 Provider 组件，以便同级组件访问。

3. 实现模式（MEDIUM）

• patterns-explicit-variants：创建显式的变体组件，而不是使用布尔模式。
• patterns-children-over-render-props：使用 children 进行组合，而不是 renderX 属性。

4. React 19 API（MEDIUM）

⚠️ 仅适用于 React 19+。如果使用 React 18 或更早版本，请跳过本节。

• react19-no-forwardref：不要使用 forwardRef；使用 use() 替代 useContext()。

使用方式

阅读各个规则文件以获取详细说明和代码示例，例如：

• rules/architecture-avoid-boolean-props.md
• rules/state-context-interface.md

每个规则文件包含：

• 为什么重要的简要说明
• 带有解释的错误代码示例
• 带有解释的正确代码示例
• 额外的上下文和参考

完整编译文档

如需包含所有规则展开的完整指南，请参阅 AGENTS.md。

限制

资料未提供该技能的具体安装命令、收费方式、支持平台或实际使用效果等信息，暂未提供。