第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>
      );
    }
  }
);

四、使用场景

1、数据获取：高阶组件可以在组件挂载时自动获取数据，并将数据通过 props 传递给被包装组件。

2、权限控制：高阶组件可以检查用户是否有访问该组件的权限，从而决定是否渲染该组件。

3、代码重用：高阶组件可以通过封装一些常见的逻辑，来提高代码的复用性。

4、状态管理：高阶组件可以管理一些状态，并通过 props 将状态传递给被包装组件，如redux里的connect。

5、表单处理：高阶组件可以处理表单的数据，包括数据验证、数据提交等，antd里面的Form。

6、设计模式：高阶组件可以作为设计模式的一部分，例如实现观察者模式、策略模式等

简单来说高阶组件可以很方便地在组件中统一处理一些通用问题，比如鉴权、数据获取等。例如，我们可以创建一个高阶组件，用来在组件加载前检查用户是否已登录，并在必要时跳转到登录页面等。

五、常用的高阶组件

withRouter

路由的高阶组件，在类组件里如果想要使用路由必须要使用高阶组件，才可以拿到路由相关的方法

connect

redux连接组件的高阶组件，connect后可以拿到redux里的所有状态和方法

Form

antd 提供的一个高阶组件,用于获取表单数据