6.高阶组件---render props模式

组件复用hooks，将逻辑封装在hooks里面

import React, { Component } from 'react'

export default class mouse extends Component {
  state = {
    x: 0,
    y: 0,
  }
  handleMouseMove = ({ clientX: x, clientY: y }) => {
    this.setState({ x, y });
  }

  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
  }
  componentWillUnmount(){
    window.removeEventListener('mousemove', this.handleMouseMove)
  }
  render() {
    return this.props.children(this.state)
  }
}

children属性使用（推荐）

<Mouse>
  {(mouse) => {
    return (
      <p>
        鼠标当前位置：{mouse.x} {mouse.y}
      </p>
    )
   }}
</Mouse>

render方法，了解即可

import React, { Component } from 'react'

export default class mouse extends Component {
  state = {
    x: 0,
    y: 0,
  }
  handleMouseMove = ({ clientX: x, clientY: y }) => {
    this.setState({ x, y });
  }

  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
  }
  componentWillUnmount(){
    window.removeEventListener('mousemove', this.handleMouseMove)
  }
  render() {
    return this.props.render(this.state)
  }
}

import React, { Component } from 'react'
import Mouse from '../hooks/mouse'
//react的图片引入
import img from '../assets/pageHeader.png'
//render是渲染ui
export default class index extends Component {
  render() {
    return (
      <div>
        index
        <Mouse
          render={(mouse) => {
            return (
              <p>
                鼠标当前位置：{mouse.x} {mouse.y}
              </p>
            )
          }}
        />
        <Mouse
          render={(mouse) => {
            return (
              <img
                src={img}
                style={{
                  position: 'absolute',
                  top: mouse.y - 100,
                  left: mouse.x - 100,
                }}
              ></img>
            )
          }}
        />
      </div>
    )
  }
}