React高阶组件

1.概述

• 目的：实现状态逻辑复用

• 采用 包装（装饰）模式

• 比如 手机：获取保护功能

•      手机壳： 提供保护功能
  

• 高阶组件就相当于手机壳，通过包装组件，增强组件功能。

• 高阶组件（HOC,Higher-OrderComponent）是一个函数，接收要包装的组件，返回增强后的组件

• 高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件 WrappedComponent

const EnhancedComponent = withHOC（WrappedComponent）

2. 使用步骤

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

/* 
  高阶组件
*/

import img from './images/cat.png'

// 创建高阶组件
function withMouse(WrappedComponent) {
   
  // 该组件提供复用的状态逻辑
  class Mouse extends React.Component {
   
    // 鼠标状态
    state = {
   
      x: 0,
      y: 0
    }

    handleMouseMove = e => {
   
      this.setState({
   
        x: e.clientX,
        y: e.clientY
      })
    }

    // 控制鼠标状态的逻辑
    componentDidMount() {
   
      window.addEventListener('mousemove', this.handleMouseMove)
    }

    componentWillUnmount() {
   
      window.removeEventListener(