高阶组件（Higher-Order Components, HOC）_umijs 高阶组件(hoc)-优快云博客

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_优快云博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

在React开发中，高阶组件（HOC）是一种用于复用组件逻辑的高级技术。HOC本身不是React API的一部分，而是一种基于React的组合特性而形成的设计模式。HOC可以看作是一个函数，它接受一个组件并返回一个新的组件。

HOC的目的

HOC的主要目的是：

代码复用：将组件之间的共同逻辑抽取到HOC中，避免重复代码。
逻辑抽象：将某些与UI无关的逻辑（如数据获取、权限验证等）从组件中抽离出来。
组件增强：在不修改原组件代码的情况下，为组件添加新的功能或属性。

HOC的基本结构

一个基本的HOC通常具有以下结构：

const withHOC = (WrappedComponent) => {
  return class extends React.Component {
    // 在这里添加额外的逻辑

    render() {
      // 传递props到被包裹的组件
      return <WrappedComponent {...this.props} />;
    }
  };
};

HOC的使用场景

数据获取

HOC可以用来封装数据获取逻辑，使得组件可以专注于渲染UI。

const withData = (WrappedComponent) => {
  return class extends React.Component {
    state = { data: null };

    componentDidMount() {
      // 假设getData是一个异步函数，用于获取数据
      getData().then(data => this.setState({ data }));
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
};

权限验证

HOC可以用来检查用户是否有权限访问某个组件。

const withAuthorization = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const user = this.props.user;
      if (!user) {
        return <div>You need to login first.</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};

渲染劫持

HOC可以用来改变组件的渲染输出。

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`${WrappedComponent.name} has mounted.`);
    }

    componentWillUnmount() {
      console.log(`${WrappedComponent.name} will unmount.`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};