高阶组件（HOC）是React中复用逻辑的设计模式，本质为接收组件并返回增强组件的函数；用于状态复用、行为增强、props注入和渲染劫持，但需注意ref转发与displayName设置。
JavaScript 中本身没有“高阶组件”（Higher-Order Component，HOC）这个原生概念——它是 React 生态中基于函数式编程思想提出的一种模式，本质是一个接收组件并返回新组件的函数。它不是语法特性，而是约定俗成的设计模式。
高阶组件怎么写
核心就是：函数入参是 React 组件（可以是函数组件或类组件），返回一个新的、增强过的组件。
- 最简形式：
function withLoading(WrappedComponent) {
return function EnhancedComponent(props) {
if (props.isLoading) {
return Loading...;
}
return
- 实际中常结合 Hooks 或 class 状态管理逻辑，比如自动订阅数据、注入 props、处理错误边界等；
- 注意保持 ref 转发（用
React.forwardRef），否则父组件拿不到原始组件的 ref； - 建议给返回组件设置 displayName，便于 DevTools 识别：
EnhancedComponent.displayName = `withLoading(${getDisplayName(WrappedComponent)})`。
它主要用来做什么
HOC 的核心价值是复用组件逻辑，尤其适合横切关注点（cross-cutting concerns）——那些不直接属于 UI 渲染、但多个组件都需要的功能。
- 状态逻辑复用：比如统一处理 loading / error / data 状态，避免每个组件重复写 useState + useEffect；
- 行为增强：如权限校验（无权限时渲染空或提示）、日志埋点（组件挂载/卸载时上报）、性能监控（记录渲染耗时）；
- Props 注入：把 context 值、全局配置、国际化 t 函数等“悄悄”传给子组件，减少手动透传；
- 渲染劫持：根据条件包裹、替换、或拦截渲染结果（如错误边界 HOC、水印组件、灰度开关）。
和 Hook 比有什么区别
React 16.8 推出自定义 Hook 后，很多原本用 HOC 实现的逻辑（比如数据获取、表单控制）现在更推荐用 Hook。两者关键差异：
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
立即学习“Java免费学习笔记（深入）”；
- HOC 是组件层面的增强，操作的是整个组件实例；Hook 是函数内部的状态与副作用逻辑，更细粒度、更易组合；
- HOC 可能导致“wrapper hell”（多层嵌套 JSX）和 ref 丢失问题；Hook 天然支持逻辑拆分与复用，且不改变组件层级；
- 但 HOC 在某些场景仍有优势：比如需要控制渲染树结构（如条件包裹）、适配旧版 React、或封装第三方组件时无法改源码。
基本上就这些。HOC 不复杂但容易忽略细节，用得克制、命名清晰、做好类型和 ref 支持，它仍是 React 工程中值得掌握的实用模式。
