（13420期）react-composition – 构建灵活的 React 组件系统

构建灵活的 React 组件系统 来自 OpenClaw 团队的 React 组件架构指南，通过组合模式解决布尔属性泛滥，帮助构建可扩展的组件库。 使用说明 该技能提供了一套系统化的 React 组件组合模式，主要解决组件设计中布尔属性泛滥导致的复杂度爆炸问题。核心包含六大模式：避免布尔属性 proliferation（通过显式变体替代条件渲染）、复合组件（通过 Context 在子组件间共享状态）、泛型上下文接口（实现依赖注入，使同一 UI 可对接不同数据源）、状态提升（将状态移至 Provider 消除 prop drilling）、显式变体组件（用明确命名替代布尔组合）、以及优先使用 children 而非 render props。 显著优点在于通过组合替代条件判断，将组件状态复杂度从指数级（2^n）降至线性，使代码更可预测。复合组件模式让 API 自文档化，开发者可像搭积木般组装界面。依赖注入接口实现了 UI 与业务逻辑的解耦，同一套组件可无缝切换本地状态、全局状态或服务端状态。状态提升彻底解决了 sibling 组件通信难题，无需 ref forwarding 或事件总线。 潜在缺点包括对初学者较陡峭的学习曲线，需要掌握 Context、闭包、渲染优化等进阶概念。短期内会增加代码量和文件数量，存在过度设计风险——简单组件强行应用可能导致"为了模式而模式"。Context 使用不当可能引发性能问题（未优化的重渲染）。此外，示例使用了 React 19 的 use() Hook，旧版本需改用 useContext。 适合中高级 React 开发者、设计系统维护者及前端架构师。特别适用于构建组件库、重构遗留"神组件"（God Component）、或设计需要多态行为的专业级 UI 系统。对追求长期可维护性的中大型团队价值最高。 使用风险主要来自性能与兼容性两方面：Context 更新机制可能导致不必要的大规模重渲染，需配合 React.memo 和 useMemo 使用；React 版本兼容性需注意；作为纯指南性质技能，实施效果高度依赖开发者理解，错误应用可能比传统方式更糟。建议在代码审查中配套使用。 原始说明 React composition patterns for scalable component architecture. Use when refactoring components with boolean prop proliferation, building flexible component libraries, designing reusable component APIs, or working with compound components and context providers.