好客租房71-高阶组件使用步骤

使用步骤

1创建一个函数 名称约定以with开头

2制定函数参数 参数应该以大写字母开头（作为要渲染的组件）

3在函数内部创建一个类组件 提供复用的状态逻辑代码 并返回

4在该组件中 渲染参数组件 同事将状态通过props传递给参数组件

    //导入react
    import React from 'react'
    import ReactDOM from 'react-dom'
     
    //导入组件
    // 约定1：类组件必须以大写字母开头
    // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
    // 约定3:组件必须提供render方法
    // 约定4:render方法必须有返回值
    import img from "./1.png"
     
    //创建高阶组件
    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>
            }
        }
        return Mouse
    }
    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'))

运行结果