高阶组件HOC

高阶组件：

目的：实现状态逻辑复用

高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件
高阶组件内部创建了一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent

使用步骤：

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

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  高阶组件
*/

// 创建高阶组件
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('mousemove', this.handleMouseMove)
    }

    render() {
      console.log('Mouse:', this.props)
      return <WrappedComponent {...this.state} {...this.props} />
    }
  }


  // 设置displayName 便于调试区分不同的组件
  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

  return Mouse
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

// 用来测试高阶组件
const Position = props => {
  console.log('Position:', props)
  return (
    <p>
      鼠标当前位置：(x: {props.x}, y: {props.y})
    </p>
  )
}

// 获取增强后的组件： 调用withMouse函数
const MousePosition = withMouse(Position)

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>高阶组件</h1>
        <MousePosition a="1" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))