SuperAPI AI 工具集

composition-patterns

编程与开发

查看项目

更新于 10-15 23:32

技能介绍

用途:这是一套 React 组合模式(Composition Patterns)指南,用于构建灵活、可维护的 React 组件。当组件出现大量布尔属性、需要构建可复用组件库、设计灵活的组件 API、审查组件架构,或使用复合组件与 Context Provider 时,可参考这些规则。

主要能力:按优先级分为四类。一、组件架构(高优先级):避免布尔属性,如 isThread、isEditing 等,因为每个布尔值都会让可能状态翻倍,应改用组合;使用复合组件,通过共享 context 让子组件从 context 而非 props 获取状态。二、状态管理(中优先级):解耦实现,Provider 是唯一知道状态如何管理的地方;定义包含 state、actions、meta 的通用 context 接口以支持依赖注入;将状态提升到 Provider 组件,便于兄弟组件访问。三、实现模式(中优先级):用显式的变体组件代替布尔模式;优先使用 children 进行组合,而非 renderX 之类的 render props。四、React 19 API(中优先级,仅限 React 19+):不使用 forwardRef,把 ref 作为普通 prop 传递;用 use() 代替 useContext()。

使用方式:按需查阅对应规则文件,例如 references/architecture-avoid-boolean-props.md、references/architecture-compound-components.md、references/state-decouple-implementation.md、references/state-context-interface.md、references/state-lift-state.md、references/patterns-explicit-variants.md、references/patterns-children-over-render-props.md、references/react19-no-forwardref.md。

适用场景:重构含大量布尔属性的组件、构建可复用组件库、设计组件 API、审查组件架构。

限制:当属性少于 3 个、只是简单变体或组件仅单处使用时,不建议套用这些模式;React 19 相关规则仅适用于 React 19 及以上版本,使用 React 18 或更早版本应跳过该部分。资料未提供安装命令、收费与平台信息。