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 }) => - 适合中大型应用——比如一个“用户列表页”，
UserListContainer拉数据并分页，UserCard和PaginationBar各自独立复用
2. 渲染属性模式（Render Props）
通过 prop 传入一个函数，由父组件决定“怎么渲染子组件内部的状态”。本质是把控制权交给使用者，提升灵活性。
- 典型例子：
Mouse at {x}, {y}
} /> - 子组件内部管理鼠标位置，但渲染内容完全由外部函数定义，避免为每种 UI 写新组件
- 注意避免每次 render 都新建函数（导致子组件不必要的重渲染），可用
useCallback缓存
3. 复合组件模式（Compound Components）
一组有隐式协作关系的组件，共享上下文状态，但对外暴露的是多个独立标签（如
立即学习“Java免费学习笔记（深入）”；
- 底层通常用 React Context 或自定义 Hook 共享状态（比如当前激活的 tab index）
- 每个子组件（
TabButton,TabPanel）只做一件事，并通过 context 感知全局状态 - 优势是语义清晰、API 友好、支持 JSX 嵌套结构，且允许用户自由组合顺序或跳过某部分
4. 自定义 Hook 封装可组合逻辑（React 特有但思想通用）
把组件逻辑（如表单校验、滚动监听、WebSocket 连接）抽成函数，返回状态和操作方法，供任意组件调用。
- 例如：
const [value, setValue, isValid, errors] = useInput({ required: true, email: true }); - 逻辑复用不绑定 UI，同一 hook 可用于 input、textarea、甚至非表单场景
- 多个 hook 可组合使用：
useAuth()+useApi()+useLoading()，在组件内自由拼装
基本上就这些。模式之间不互斥——比如一个复合组件内部可能用 render props 渲染某个区域，其容器又基于自定义 hook 管理状态。关键是按需选择，优先保证组件职责单一、通信路径明确、复用成本低。
