React 高阶组件（HOC）

1.React 高阶组件（HOC）

****1. HOC（高阶组件）HOC (Higher - Order Component)

定义：高阶组件是一个 接收组件 作为参数并返回新组件的函数，用于复用组件逻辑，遵循 纯函数特性（无副作用，输出仅依赖输入）。

****优点：

****逻辑复用：抽离通用逻辑（如权限校验、数据请求）。

****解耦性：业务组件与公共逻辑分离，提升可维护性。

****组合性：可嵌套使用多个 HOC。

****示例：

复制代码

const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log("Rendered:", WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

React JSX

****2. 属性代理（Props Proxy）

通过包裹组件并操作其 props`/state` 实现功能增强，不直接修改原组件。

****应用场景：

****Props 增强：添加/修改 ```props`

复制代码

const withUser = (WrappedComponent) => {
  return (props) => (
    <WrappedComponent {...props} user={currentUser} />
  );
};

Plain Text

****State 管理：封装状态逻辑

复制代码

const withToggle = (WrappedComponent) => {
  return class extends React.Component {
    state = { isOn: false };
    toggle = () => this.setState(prev => ({ isOn: !prev.isOn }));
    render() {
      return <WrappedComponent {...this.props} isOn={this.state.isOn} toggle={this.toggle} />;
    }
  };
};

Plain Text

****条件渲染：控制组件渲染逻辑

复制代码

const withLoading = (WrappedComponent) => {
  return (props) => (
    props.isLoading ? <Spinner /> : <WrappedComponent {...props} />
  );
};

Plain Text

****外部逻辑封装：如事件监听

复制代码

const withResize = (WrappedComponent) => {
  return class extends React.Component {
    handleResize = () => {/* 处理逻辑 */};
    componentDidMount() { window.addEventListener('resize', this.handleResize); }
    componentWillUnmount() { window.removeEventListener('resize', this.handleResize); }
    render() { return <WrappedComponent {...this.props} />; }
  };
};

Plain Text

****3. 反向继承（Inheritance Inversion，类组件专用）

通过继承被包裹组件，直接操作其生命周期和渲染树，实现更底层控制。

****核心能力：

拦截生命周期方法（如 ```componentDidMount`）。

修改 state` 或 props`。

操作渲染结果（通过 ```super.render()` 获取 React 元素并修改）。

****示例：

****生命周期拦截

复制代码

const withTiming = (WrappedComponent) => {
  return class extends WrappedComponent {
    componentDidMount() {
      console.time("renderTime");
      super.componentDidMount?.();
      console.timeEnd("renderTime");
    }
    render() { return super.render(); }
  };
};

Plain Text

****修改渲染树

复制代码

const withRedBorder = (WrappedComponent) => {
  return class extends WrappedComponent {
    render() {
      const element = super.render();
      return React.cloneElement(element, { style: { border: "2px solid red" } });
    }
  };
};

Plain Text

****对比属性代理 vs 反向继承

****特性	****属性代理	****反向继承
控制方式	通过包裹组件	继承并覆盖原组件方法
生命周期访问	无法直接访问	可直接拦截/修改
适用场景	添加 props/条件渲染/逻辑复用	深度定制生命周期或渲染树

****注意事项

****避免修改原组件：HOC 应通过组合而非修改实现功能。

****Ref 传递问题：使用 ```React.forwardRef` 传递 ref 引用。

****命名冲突：确保 HOC 添加的 ```props` 名称不与原组件冲突。

大白话:一个组件接受一个组件作为参数返回新的函数，这个组件就是高阶组件，接受后可以在该组件中两种用法一种是处理数据传回接受到的组件进行渲染，也就是改变props和state，或者进行条件渲染以属性代理的方式，但均不动传进起来的组件，另一种形式是将传进来的组件进行集成，类组件的继承，就拿到了该组件的所有属性包括生命周期，然后可以进行想要的操作返回新的修改过的组件