vercel-composition-patterns

原文：🇺🇸 英文

已翻译

可扩展的React组合模式。适用于重构存在大量布尔型props的组件、构建灵活的组件库或设计可复用API的场景。适用于涉及复合组件、渲染属性、上下文提供者或组件架构的任务。包含React 19 API变更内容。

17.8k次下载

查看 GitHub 仓库

添加于2026-02-03

SKILL.md 内容

查看翻译对照 →

React组合模式

用于构建灵活、可维护的React组件的组合模式。通过使用复合组件、提升状态和组合内部逻辑来避免布尔型props泛滥。这些模式能让代码库在规模扩大时，对人类和AI Agent都更易维护。

适用场景

在以下场景参考这些指南：

重构包含大量布尔型props的组件
构建可复用组件库
设计灵活的组件API
评审组件架构
处理复合组件或上下文提供者

按优先级划分的规则类别

优先级	类别	影响程度	前缀
1	组件架构	高	`architecture-`
2	状态管理	中	`state-`
3	实现模式	中	`patterns-`
4	React 19 API	中	`react19-`

快速参考

1. 组件架构（高优先级）

```
architecture-avoid-boolean-props
```
- 不要通过添加布尔型props来定制行为；使用组合模式
```
architecture-compound-components
```
- 用共享上下文构建复杂组件结构

2. 状态管理（中优先级）

```
state-decouple-implementation
```
- 只有Provider知晓状态的管理方式
```
state-context-interface
```
- 定义包含状态、操作、元数据的通用接口用于依赖注入
```
state-lift-state
```
- 将状态移至Provider组件中，以便兄弟组件访问

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