高阶组件（Higher-Order Components，简称 HOCs）是 React 中一种复用组件逻辑的高级技术，常用于封装组件功能、共享状态或增强组件行为。以下是关键知识点：

什么是 HOCs？

HOCs 是函数组件，接受一个子组件作为参数，返回一个增强后的组件。
例如： 

function withData(WrappedComponent) {
  return class extends React.Component {
    state = { data: null };
    // 加载数据逻辑...
    render() {
      return <WrappedComponent {...this.props} data={this.state.data} />;
    }
  };
}

💡 核心特性：

  • 不修改原组件
  • 通过 props 传递功能
  • 支持组合复用

典型用途

  • 数据获取：封装 API 调用逻辑（如 withAuth）
  • 状态管理：统一处理共享状态（如 withTheme）
  • 功能增强：添加日志、防抖等行为（如 withLogger）
  • 渲染劫持：动态控制组件渲染（如 withPermission）

实践示例

  1. 简单封装 
    const EnhancedComponent = withData(OriginalComponent);
  2. 多组件组合 
    const FinalComponent = withLogger(withData(OriginalComponent));
  3. 条件渲染 
    if (user.isAdmin) return <AdminPanel />;
return <UserPanel />;

注意事项

  • 避免过度使用导致组件臃肿
  • 优先使用 Hooks 替代（如 useContext、useReducer）
  • 保持组件职责单一，遵循「开闭原则」

🔗 扩展学习：React 官方文档 - HOCs
📌 相关教程：react_tutorial/components

React_HOC