React高阶组件HOC的使用

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。 高阶组件只提供逻辑代码 视图代码会做为参数传递给高阶组件进行渲染

举例

编写高阶组件获取浏览器窗口的x，y坐标

withMouse是高阶组件 Position是视图代码

代码语言：javascript复制

import React, { Component } from 'react';
// withMouse 只提供逻辑代码
// WrappendComponent为Dom参数进行渲染
function withMouse(WrappendComponent) {
    class Mouse extends Component {
        constructor(props) {
            super(props);
            this.state = {
                x: 0,
                y: 0
            }
        }
        handleMouseMove = e => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }
        componentDidMount() {
            window.addEventListener('mousemove', this.handleMouseMove)
        }
        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }
        render() {
            return <WrappendComponent {...this.state} /> //{...this.props}可传递父组件props
        }
    }
    return Mouse
}

// 视图
const Position = props => {
    return <p>x:{props.x} y:{props.y}</p>
}
//将视图做为参数传递
export default withMouse(Position)

渲染 position 技巧 浏览器

0 人点赞