HOC 与装饰者模式

HOC 主要功能： 属性代理，操作 props 实现功能扩展，添加通用属性或者拦截渲染逻辑 反向继承，劫持原组件访问或者生命周期和状态 HOC 是装饰者模式 核心思想是通过包装组件的方式动态增强组件功能，而不是通过继承或直接修改原组件代码。

补充

补充：HOC（Higher-Order Component，高阶组件）是参数为组件、返回值为新组件的函数。它不会修改传入组件本身，而是通过组合的方式复用逻辑。

常见的两种实现方式：

• 属性代理（Props Proxy）：HOC 通过包裹原组件，在 render 中返回 <WrappedComponent {...props} extraProps />，可以操作 props、抽象 state 或拦截渲染。
• 反向继承（Inheritance Inversion）：HOC 返回的组件继承自 WrappedComponent，可在生命周期、render 中通过 super 访问原组件。

简单示例（属性代理）：

function withLoading(WrappedComponent) {
  return function WithLoading(props) {
    if (props.isLoading) return <div>加载中...</div>;
    return <WrappedComponent {...props} />;
  };
}

注意点：

• HOC 不应在 render 中创建，否则每次都会得到新组件导致子组件 remount。
• 需要复制静态方法或使用 hoist-non-react-statics。
• 建议使用 displayName 方便调试。
• 现代 React 推荐用 Hooks（useAuth、useFetch 等）替代 HOC 复用逻辑，但 HOC 在跨组件层级复用时仍然有效。