React HOC 高阶组件例子

WrappedComponent 高阶组件

定义：高阶组件是以参数为组件 返回值为新组建的函数

作用: 复用状态逻辑

 

高阶组件例子代码如下：

实现的复用逻辑为鼠标滑过获取最新的鼠标坐标（clintX，clintY）

import React from 'react'
                            // 参数1是传递的组件，参数2是类名
export default function hoc (WrappedComponent, classed) { 
  // 返回一个新的组件
  return class extends React.Component {
    constructor (props) {
      super(props)
      this.state = { // 初始化state
        xy: { x:0, y:0 },
        classed
      }
    }

    componentDidMount () {
      // 组件挂载完后，根据传递的类名获取元素
      const el = document.querySelector(this.state.classed)
     // 给元素添加鼠标滑过事件
      el.addEventListener('mousemove', evt => {
        this.setState({
          // 获取鼠标位置，修改state值
          xy: { x: evt.clientX, y: evt.clientY }
        })
      })
    }

    render () {
      const { xy } = this.state // 将每次更新的值获取
      return (
        // 调用传进来的组件 给组件传值，这里相当与调用传进来的组件，然后父传子，子组件就可以通过props进行接收
        <WrappedComponent xy={xy} />
      )
    }
  }
}

进行调用

import React, { Component } from 'react'
import hoc from '../hoc' // 引入高阶组件

class Shop extends Component {
  render() {
    return (
      <div className="pages-shop">
        shop
      </div>
    )
  }
}

export default hoc(Shop, '.pages-shop')
// 默认抛出高阶组件，将当前组件作为第一个参数，div类名作为第二个参数