react-高阶组件

react-高阶组件（HOC）---组件公共逻辑的抽离（不是功能，是一种设计模式）

---

高阶组件(HOC)： 就是一个函数，且该函数接受一个组件作为参数，并返回一个新的高阶组件，它是一种模式，

1. mixin, 已被React废弃,
2. 代码复用，逻辑抽象化, 多个组件的公共逻辑

import React from 'react';
import HOC from './HOC'
const HOCApp = (props) => {
    const { x, y } = props.mouse
    return (<div>
        <div>{x}, {y}</div>
    </div>)

}
export default HOC(HOCApp)

import React from 'react'
const HOCFunc = (Component) =>{
    class HOC extends React.Component {
        constructor(props){
            super(props)
            this.state = {
                x:0, 
                y:0
            }
        }
        handleMouseMove = (e) => {
            this.setState({
                x: e.pageX,
                y: e.pageY
            })
        }   
        render(){
            return <div style={{height:'1000px'}} onMouseMove={this.handleMouseMove}>
                <Component {...this.props} mouse={this.state} />
            </div>
        }
    }
    return HOC
}
export default HOCFunc