第17节——高阶组件

一、概念

高阶组件（Higher-Order Component，HOC）是 React 中一种代码重用的模式，它是一个函数，接受一个组件作为参数，并返回一个新的组件。它的作用是对组件进行抽象，从而在不修改组件代码的情况下，扩展组件的功能。

高阶组件的一个典型特点是在组件外层套一个新的组件，新的组件可以使用接收的组件的属性和状态，并且可以为其提供新的属性和方法。这样，我们就可以对组件进行扩展，并在多个组件中重用这些扩展功能。

总之，高阶组件是一种代码复用的有效方法，使得我们可以在不修改组件代码的情况下，对其进行扩展和重用，并统一处理一些通用问题

二、基本语法

高阶组件语法非常简单，它是一个接收组件为参数，并返回新组件的函数。语法如下：

/**
 * higherOrderComponent 是高阶组件函数
 * WrappedComponent 是被包装的组件
 * newComponent 返回的新组件
 */
const newComponent = higherOrderComponent(WrappedComponent);

三、例子

封装一个高阶组件，使用的组件延迟3秒展示

import React from "react";

/**
 * 创建一个延时加载的高阶组件
 * @param {} WrappedComponent
 * 接收到的组件，就是把这个组件延时三秒展示
 * @returns
 */
export default function delyLoadComponent(WrappedComponent) {
  
  /**
   * 返回一个组件
   * 这个组件我们正常创建即可
   */
  return class DelyLoadComponent extends React.Component {
    state = {
      isLoad: false,
    };

    componentDidMount() {
      setTimeout(() => {
        this.setState({
          isLoad: true,
        });
      }, 3000);
    }

    render() {
      /**
       * 返回我们接收到的组件
       * 并且给这个返回加上相应的逻辑
       */
      return this.state.isLoad ? <WrappedComponent /> : <div>加载中</div>;
    }
  };
}

页面使用

import React from "react";
import LearnRef2 from "./learn-ref2";
import delyLoadComponent from "./learn-hoc";
export default delyLoadComponent(
  class LearnRef extends React.Component {
    render() {
      return (
        <div>
           组件内容
        </div>
      );
    }
  }
);