react-高阶组件(1)-code

import React from 'react'
import ReactDOM from 'react-dom'
import img from'./img/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(){
            addEventListener('mousemove',this.handleMouseMove)
        }
        componentWillUnmount(){
            addEventListener('mousemove',this.handleMouseMove)
        }
        render(){
            return <WrappedComponent {...this.state}></WrappedComponent>
        }
    }
    return Mouse
}

const Position=props=>(
    <p>
        鼠标当前位置(x:{props.x},y:{props.y})
    </p>
)

const Mouseposition=withMouse(Position)

const Cat =props=>(<img src={img} style={{
    position:'absolute',
    top:props.y-64,
    left:props.x-64,
}}/>)

const MouseCat=withMouse(Cat)

class App extends React.Component{
    render(){
        return(
            <div>
                <Mouseposition></Mouseposition>
                <MouseCat></MouseCat>
            </div>
        )
    }
}

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

意义:接收需要包装的组件,返回包装后增强的组件