Frontend Composition Patterns — 前端组合模式

React 组合模式 构建灵活、可维护的 React 组件，使用复合组件、上下文提供者和显式变体。避免布尔属性的泛滥。 什么 可扩展的组合模式： 复合组件与共享上下文 状态/操作/元数据上下文接口用于依赖注入 显式变体组件优于布尔属性 提供者组件中的提升状态 子组件组合优于渲染属性 何时 重构具有多个布尔属性的组件 构建可重用的组件库 设计灵活的组件 API 创建复合组件（Card、Dialog、Form 等） 组件需要在兄弟元素之间共享状态 关键词 组合、复合组件、上下文、提供者、布尔属性、变体、React 模式、组件架构、渲染属性、子组件 来源：Vercel Engineering 安装 OpenClaw / Moltbot / Clawbot npx clawhub@latest install composition-patterns 核心原则 避免布尔属性的泛滥。每个布尔属性都会使可能的状态翻倍。 // 不良：4 个布尔属性 = 16 个可能的状态 // 良好：显式变体，清晰的意图 模式 1：复合组件 使用共享上下文结构复杂组件。消费者组合他们需要的内容。 const ComposerContext = createContext(null) // 提供者处理状态 function ComposerProvider({ children, state, actions, meta }: ProviderProps) { return ( {children} ) } // 子组件访问上下文 function ComposerInput() { const { state, actions: { update }, meta: { inputRef } } = use(ComposerContext) return ( update(s => ({ ...s, input: text }))} /> ) } function ComposerSubmit() { const { actions: { submit } } = use(ComposerContext) return Send } // 导出为命名空间 const Composer = { Provider: ComposerProvider, Frame: ComposerFrame, Input: ComposerInput, Submit: ComposerSubmit, Header: ComposerHeader, Footer: ComposerFooter, } 使用： 模式 2：通用上下文接口 定义任何提供者都可以实现的契约：状态、操作、元数据。 interface ComposerState { input: string attachments: Attachment[] isSubmitting: boolean } interface ComposerActions { update: (updater: (state: ComposerState) => ComposerState) => void submit: () => void } interface ComposerMeta { inputRef: React.RefObject } interface ComposerContextValue { state: ComposerState actions: ComposerActions meta: ComposerMeta } 相同的 UI，不同的提供者： // 本地状态提供者 function ForwardMessageProvider({ children }) { const [state, setState] = useState(initialState) return ( {children} ) } // 全局同步状态提供者 function ChannelProvider({ channelId, children }) { const { state, update, submit } = useGlobalChannel(channelId) return ( {children} ) } 两者都可以与相同的 组件一起使用。 模式 3：显式变体 为每种用例创建命名组件，而不是布尔模式。 // 不良：这是什么？ // 良好：自我文档化 实现： function ThreadComposer({ channelId }: { channelId: string }) { return ( ) } function EditComposer({ messageId }: { messageId: string }) { return ( ) } 模式 4：提升状态 组件外部的组件可以通过提供者访问状态。 function ForwardMessageDialog() { return ( {/ ... /} ) }