react 高阶组件

一. 什么是高阶组件

高阶组件. 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。. HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式

这是官网解释 其实很多人会很懵逼 什么是HOC  大家都没听说过  那大家听说过HOF把  HOF就是我们常用的高阶函数  什么是高阶函数  就是你传的参数是一个函数 或者返回的是一个函数，比如常用的forEach() ,map(),sort() 计时器等等 这些参数都是一个函数 对把  这就是简单的高阶函数，那么高阶组件就很好理解了   那就是参数是一个组件 返回的也是一个组件 他的作用就是解决功能的复用  所以我们看一下代码

这是我写的一个小案例，来监听视图的大小那么我代码是咋写的呢，实例

 

class App extends Component {
    render() {
        return (
            <div>
                <p>窗口视口哦大小</p>
                <Son></Son>
                <Father></Father>
            </div>
        )
    }

}

class Father extends Component {
    state = {
        x: document.documentElement.clientWidth,
        y: document.documentElement.clientHeight
    }
    componentDidMount() {
        window.addEventListener('resize', () => {
            this.setState({
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            })
        })
    }
    render() {
        return (
            <div>
                x:{this.state.x} y:{this.state.y}
            </div>
        )
    }

    componentWillUnmount() {
        window.removeEventListener('resize')
    }
}

class Son extends Component {
    state = {
        x: document.documentElement.clientWidth,
        y: document.documentElement.clientHeight
    }
    componentDidMount() {
        window.addEventListener('resize', () => {
            this.setState({
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            })
        })
    }

    render() {
        return (
            <div>
                x:{this.state.x} y:{this.state.y}
            </div>
        )
    }

    componentWillUnmount() {
        window.removeEventListener('resize')
    }
}

有没有发现 Father 组件和Son组件里面的功能是完全重复的 那么完全重复你会造成什么  代码重复性，代码臃肿，代码一点又不简洁 那么我们就可以把重复的摘出来 实例：

按照步骤来给你讲：

1.首先我把他们封装成了一个高阶组件 这里看出我要传入的参数是什么 是一个components 是一个组件 上面我也说过什么是HOC 什么是HOF 这里就不说明了

2.我把他们的公共方法宅了出来 因该可以看出 

3.我们只需要把这个组件返回出去 并且呢你把把你当然的公共方法展开符的方式当成props传入很不错把 和父传子一样  

下一步也就很简单了不就是声明变量 拿到返回的组件就可以了吗 

把里面的数据改成用props接收到  效果和以前还是一样的 对不对  这就是高阶组件 这里看出节省了很多的代码  react是一个很灵活的  所以一切都是按照你的想法来做更多东西 才能从中分想到快乐 不是嘛