核心概述
本技能提供一套经过工程验证的 React 组合模式，旨在解决大型组件库中常见的布尔属性泛滥（boolean prop proliferation）问题——每个布尔属性翻倍可能的状态空间，导致组件难以预测和维护。
核心用法
技能围绕六大模式展开：
1. 复合组件（Compound Components）：通过共享 Context 将复杂组件拆分为可组合的子组件，如 Composer.Provider、Composer.Input、Composer.Submit，消费者按需装配。
2. 通用上下文接口：定义 state/actions/meta 三层契约，使同一套 UI 可接入本地状态、全局状态或同步状态等不同实现，实现状态与 UI 的完全解耦。
3. 显式变体：用命名组件替代布尔模式，如 <ThreadComposer />、<EditComposer /> 取代 isThread、isEditing 属性，意图自文档化。
4. 状态提升（Lifted State）：通过 Provider 边界而非视觉嵌套共享状态，使对话框预览、操作按钮等视觉层级外的组件也能访问和操作状态。
5. 子组件优于 Render Props：用 children 组合结构，仅对数据传递保留 render props。
6. 实现解耦：UI 组件只依赖接口，不感知状态来源（Redux、Zustand、本地 useState 等）。
显著优点
- 类型安全：TypeScript 接口驱动，Context 值有完整类型约束
- 可测试性：状态逻辑与渲染分离，便于独立测试
- 可扩展性：新增变体只需新增 Provider，不修改现有组件
- 团队协作：显式 API 减少沟通成本，代码即文档
潜在局限
- 学习曲线：开发者需适应 Context 心智模型，避免滥用
- 性能考量：高频更新场景需配合
useMemo/useCallback或状态库优化 - 嵌套深度：过度拆分可能导致组件树冗长
适合人群
- 构建设计系统或组件库的前端工程师
- 维护大型 React 应用、需重构「属性地狱」组件的开发者
- 追求显式 API 设计、厌恶隐式约定的团队
常规风险
- Context 更新导致不必要重渲染（需配合
React.memo或 selector 模式） - 忘记提供默认值导致运行时 null 错误
- 过度工程化：简单场景无需全套模式，权衡使用
来源可信度
模式源自 Vercel Engineering 工程实践，属于行业头部团队的架构经验沉淀，经大规模生产环境验证。