javascript如何实现组合组件_有哪些模式

JavaScript组合组件核心是解耦复用，主流模式包括：1.容器/展示分离逻辑与UI；2.渲染属性模式通过函数prop提升灵活性；3.复合组件共享上下文实现隐式协作；4.自定义Hook封装可组合逻辑。

JavaScript 中实现组合组件，核心是让多个独立、可复用的组件像搭积木一样拼装成更复杂的功能，而不是靠继承或强耦合。主流模式不依赖框架，但在 React、Vue 等中体现得最成熟；即使写原生 Web Components 或纯 JS 类，也能套用这些思想。

1. 容器/展示组件模式（Container/Presentational）

把逻辑和 UI 分开：容器组件负责数据获取、状态管理、事件处理；展示组件只接收 props，专注渲染和交互反馈。两者通过 props 通信，解耦清晰。

• 容器组件可以是函数或类，调用 fetch、useEffect、useState 等，然后把数据和回调传给子组件
• 展示组件保持无状态（stateless），甚至可写成纯函数：const Button = ({ label, onClick }) => <button onclick="{onClick}">{label}</button>
• 适合中大型应用——比如一个“用户列表页”，UserListContainer拉数据并分页，UserCard和PaginationBar各自独立复用

2. 渲染属性模式（Render Props）

通过 prop 传入一个函数，由父组件决定“怎么渲染子组件内部的状态”。本质是把控制权交给使用者，提升灵活性。

• 典型例子：<mousetracker render="{({" x y><h2>Mouse at {x}, {y}</h2>} /></mousetracker>
• 子组件内部管理鼠标位置，但渲染内容完全由外部函数定义，避免为每种 UI 写新组件
• 注意避免每次 render 都新建函数（导致子组件不必要的重渲染），可用 useCallback 缓存

3. 复合组件模式（Compound Components）

一组有隐式协作关系的组件，共享上下文状态，但对外暴露的是多个独立标签（如 <tabs><tabbutton><tabpanel></tabpanel></tabbutton></tabs>），而非一个大组件包。

标签： vue react javascript java js websocket ai red