什么是React的高阶组件？

在React的世界里，高阶组件是一种有点“老派”但非常重要的代码复用模式。它的英文是Higher-Order Component，大家习惯叫HOC。你可以把它理解成一个“组件工厂”，或者一个“包装器”。它本身不是一个普通组件，而是一个函数，这个函数接收一个组件作为参数，然后返回一个增强版的新组件。

HOC干了什么？给组件“加料”

想象你有一堆组件，它们都需要相同的逻辑：比如检查用户是否登录、给组件打上性能监控、或者注入一些通用的数据。你当然可以把这段逻辑在每个组件里都写一遍，但那太蠢了。高阶组件就是帮你把这段通用逻辑抽出来，像一层包装纸一样，“包”在目标组件外面。

// 一个简单的高阶组件：它给被包装的组件添加一个 isLoading 的 prop
function withLoadingIndicator(WrappedComponent) {
  return function EnhancedComponent(props) {
    if (props.isLoading) {
      return <div>数据加载中...</div>;
    }
    // 把原始props传给被包装的组件
    return <WrappedComponent {...props} />;
  };
}
// 使用它
const UserListWithLoading = withLoadingIndicator(UserList);
// 渲染 <UserListWithLoading isLoading={true} />

上面这个withLoadingIndicator就是一个HOC。它不在乎你传进来的是UserList还是ProductList，它只关心isLoading这个prop，并根据它决定是显示加载提示，还是把控制权（和所有props）交给里面的原始组件。

HOC的典型应用场景

在Hooks出现之前，HOC是实现逻辑复用的主力。最常见的有两种用法：
一是注入props。比如连接Redux store的connect函数，就是一个经典HOC，它把dispatch和需要的state切片作为props“注入”给你的组件。

const ConnectedComponent = connect(mapStateToProps)(MyComponent);

二是劫持渲染。比如上面那个加载指示器，或者权限控制组件，它们可能根据条件直接返回不同的JSX，根本不让被包装的组件渲染。

HOC的麻烦和局限

用HOC得小心。它容易带来命名冲突——如果内外组件有同名的prop，外面的会把里面的覆盖掉。你还得手动传递无关的props（用...props），不然里面组件就收不到。

最麻烦的是，它在组件层级里增加了一个看不见的“中间层”。调试时，你在开发者工具里看到的组件名可能是WithLoading(UserList)，而不是直接的UserList。这让调试和跟踪变得有点绕。

HOC vs Hooks

现在有了Hooks，很多以前用HOC做的事，用自定义Hook写起来更简单。Hooks是逻辑复用，而HOC是组件复用。Hooks不会改变组件结构，你只是调用了几个函数。HOC则会实实在在多出一个包装组件。

所以，高阶组件是一种强大的模式，尤其在你需要修改组件渲染行为或注入props时。但在新项目中，对于纯逻辑复用（数据获取、订阅），自定义Hook通常是更清晰的选择。理解HOC，主要是为了能读懂和维护那些使用Redux等库的老代码。