高阶组件的使用方法(简单易懂)

关于高阶组件的使用方法

实现一个监听鼠标位置的效果

// 在render-props模式下实现
class Mouse extends React.Component {
    // 鼠标位置状态
    state = {
        x: 0,
        y: 0
    }

    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }
    render(){
        // 向外界提供当前子组件里面的数据
        return this.props.render(this.state)
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                App
                <Mouse render={mouse => {
                    return <p>X{mouse.x}Y{mouse.y}</p>
                }}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

然后来将其包装成一个高阶组件

先来介绍一下高阶函数的使用步骤

• 创建一个函数，名称约定以with开头
• 指定函数参数，参数应该以大写字母开头
• 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
• 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
• 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

首先第一步:
创建一个函数 来对其进行包裹

function withMouse() {
 class Mouse extends React.Component {
    // 鼠标位置状态
    state = {
        x: 0,
        y: 0
    }

    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }
    render(){
        // 向外界提供当前子组件里面的数据
        return this.props.render(this.state)
    }
}
}

第二步 在render函数里面返回传递过来的组件，把当前组件的状态设置进去 具体暂定为WrappedComponent 并且需要在组件中 将this.state释放出来

function withMouse(WrappedComponent ){
*****代码不变*******
*****只修改render里面的返回值******
 return <WrappedComponent {...this.state}
}

第三步 return里面之前的返回值 放入Position组件内传入props

function Position(props) {
    return (
        <p>
            X:{props.x}
            Y:{props.y}
        </p>
    )
}

第四步 将position组件包装 定义Mouse来接收调用withMouse方法 传来的值 在上面要再一次return 出这个接收值Mouse

let Mouse = withMouse(Position)

第五步 把返回值设置到父组件就可以了

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                高阶组件
                <MousePosition></MousePosition>
            </div>
        )
    }
}```