17370845950

高阶组件（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。两者关键差异：

• HOC 是组件层面的增强，操作的是整个组件实例；Hook 是函数内部的状态与副作用逻辑，更细粒度、更易组合；
• HOC 可能导致“wrapper hell”（多层嵌套 JSX）和 ref 丢失问题；Hook 天然支持逻辑拆分与复用，且不改变组件层级；
• 但 HOC 在某些场景仍有优势：比如需要控制渲染树结构（如条件包裹）、适配旧版 React、或封装第三方组件时无法改源码。

基本上就这些。HOC 不复杂但容易忽略细节，用得克制、命名清晰、做好类型和 ref 支持，它仍是 React 工程中值得掌握的实用模式。