好客租房72-高阶组件3使用displayName

function withMouse(WrappedComponent){
         class Mouse extends React.Component{
             //鼠标状态
             state={
                 x:0,
                 y:0
             }
             componentDidMount=()=>{
                 window.addEventListener('mousemove',this.handeleMove)
             }
             handeleMove=e=>{
                 this.setState({
                     x:e.clientX,
                     y:e.clientY
                 })
             }
             componentWillUnmount(){
                 window.removeEventListener('mousemove',this.handeleMove)
             }
             render(){
                 return <WrappedComponent {...this.state}>WrappedComponent>
             }
         }
         Mouse.displayName=`WithMouse${getDisPlayName(WrappedComponent)}`
         return Mouse
     }
     function getDisPlayName(WrappedComponent){
         return WrappedComponent.displayName||WrappedComponent.name||'component'
     }
     const Position=props=>
         (<p>鼠标当前位置:(x:{props.x},y:{props.y})p>)
         const Cat=props=>(
             <img src={img} alt="猫"
                          style={{position:"absolute",
                          top:props.y,
                          left:props.x,
                          width:"100px",
                          height:"100px"}}/>
         )
     const MousePosition=withMouse(Position)
     const CatPosition=withMouse(Cat)
     class App extends React.Component {
         constructor(props) {
             super(props)
             console.log('生命周期钩子函数:construtor')        
         }
         //初始化state
         //1进行dom操作
         //2发送网络请求   
         render() {
             console.log('生命周期钩子函数:render')
             return (
                 <div id="title">
                     <h1>render props模式h1>
                    <MousePosition>MousePosition>
                    <CatPosition>CatPosition>
                 div>
             )
         }
     }
     ReactDOM.render(<App>App>, document.getElementById('root'))