design-pattern
design-pattern/react-patterns/index.md
medium
design-pattern-react-patterns-index
React 组件设计模式(前端视角) — 复合组件 / 自定义 hook 抽逻辑 / render props headless / Provider context / 容器展示分离。Use when 设计复杂组件 API / 复用跨组件逻辑 / 共享跨层级状态 / 解耦数据与展示时。
子项索引
| 子项 | 一句话 |
|---|---|
| design-pattern-react-compound-components skill | 复合组件 — 一组协作组件经 Context 共享父级隐式状态、暴露 <Tabs.Tab> 式声明组合 API |
| design-pattern-react-custom-hook-extraction skill | 把可复用的有状态逻辑抽成 useXxx 自定义 hook,2025 复用首选,替代 HOC/render props |
| design-pattern-react-render-props-headless skill | render props 与 headless 组件:组件托管子树、把渲染权交给消费者,只给行为不给样式 |
| design-pattern-react-provider-context skill | 用 Context + 封装 Provider 跨多层共享低频变更全局值(主题/locale/用户),按变更频率拆分 |
| design-pattern-react-container-presentational skill | 把取数+状态逻辑(容器/hook)与纯渲染(展示组件,只收 props 无副作用)分离,展示层易测易复用易 Storybook |
Design Pattern · React 组件设计模式
本层包含
| 名称 | 类型 | 一句话 |
|---|---|---|
| compound-components | skill | 父子隐式协作共享上下文，组合式灵活 API（Tabs/Select 风格） |
| custom-hook-extraction | skill | 把副作用与状态逻辑抽成 useXxx，跨组件复用 |
| render-props-headless | skill | 逻辑与 UI 解耦，逻辑层只给数据、渲染交调用方 |
| provider-context | skill | Provider + Context 共享跨层级状态，消除 prop drilling |
| container-presentational | skill | 数据获取（容器）与纯渲染（展示）职责分离 |
何时下钻
| 你在做什么 | 进哪个 |
|---|---|
| 设计一组父子配合、对外暴露组合式 API 的组件（如自定义 Tabs/Menu/Form） | compound-components |
多个组件重复同一段 useState/useEffect/订阅逻辑，想抽出复用 |
custom-hook-extraction |
| 一段交互逻辑要配多种不同 UI，想把渲染权交给调用方 | render-props-headless |
| 主题/登录态/i18n 等跨多层级共享，prop 一路透传太痛苦 | provider-context |
| 组件里数据请求与展示揉在一起，想拆成"取数 + 纯展示" | container-presentational |