第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 ?  : 
加载中
; } }; }

页面使用

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

四、使用场景

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

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

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

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

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

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

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

五、常用的高阶组件

withRouter

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

connect

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

Form

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

你可能感兴趣的:(react,前端,javascript,react.js)