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` 实现功能增强,不直接修改原组件。

****应用场景

  1. ****Props 增强:添加/修改 ```props`

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

    Plain Text

  1. ****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

  1. ****条件渲染:控制组件渲染逻辑

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

    Plain Text

  1. ****外部逻辑封装:如事件监听

    复制代码
    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 元素并修改)。

****示例

  1. ****生命周期拦截

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

    Plain Text

  1. ****修改渲染树

    复制代码
    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,或者进行条件渲染以属性代理的方式,但均不动传进起来的组件,另一种形式是将传进来的组件进行集成,类组件的继承,就拿到了该组件的所有属性包括生命周期,然后可以进行想要的操作返回新的修改过的组件

相关推荐
打不着的大喇叭15 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code20 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟22 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light38 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子41 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000041 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心42 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再42 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript