概述

目的：实现状态逻辑复用
采用包装模式
手机：获取保护功能
手机壳：提供保护功能
高阶组件就相当于手机壳，通过包装组件，增强组件功能
高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件

使用步骤

创建一个函数，名称约定以with开头
指定函数参数，参数应该以大写字母开头
在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

代码示例

import React from "react";

const withMouse = (WrapperComponent) => {
  class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0,
    };
    render() {
      // return this.props.children({ x: this.state.x, y: this.state.y })
      return <WrapperComponent {...this.state}></WrapperComponent>;
    }

    componentDidMount() {
      window.addEventListener("mousemove", (e) => {
        this.setState({
          x: e.pageX,
          y: e.pageY,
        });
      });
    }
  }

  return Mouse;
};

/* 定义显示结构的组件  就是之前的render或者children  函数的返回值 */

const Show = ({ x, y }) => {
  return (
    <div>
      御剑乘风来,除魔天地间!===show===={x}==={y}
    </div>
  );
};

const ShowPosition = withMouse(Show);

/* 复用 */
const Show2 = ({ x, y }) => {
  return (
    <h1>
      ==={x}==={y}
    </h1>
  );
};
const ShowPosition2 = withMouse(Show2);

class Hoc extends React.Component {
  render() {
    return (
      <div>
        御剑乘风来,除魔天地间!====Hoc
        <ShowPosition></ShowPosition>
        <hr />
        <ShowPosition2></ShowPosition2>
      </div>
    );
  }
}
export default Hoc;

react之高阶组件

概述

使用步骤

代码示例