高阶组件仅仅是一个接收组件作为输入并返回组件的函数。高阶组件实现方式：高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式

实现高阶组件的方法

组件是 React 中代码复用的基本单元。但你会发现某些模式并不适合传统组件。
现在有两个组件都是实现获取浏览器窗口大小的功能，基本逻辑是一样的，但是Sub是通过按钮实现的，Foo是通过div来实现的，两个组件有共同逻辑，那是不是可以抽取公共部分。

  1. //公共代码逻辑用高阶组件来实现，高阶组件关心逻辑部分，对视图不关心，
  2. import React from 'react'
  3. export default function withSize(Component){
  4.     return class toSize extends React.Component{
  5.         constructor(){
  6.         super()
  7.         this.state={
  8.             xPos:document.documentElement.clientWidth,
  9.             yPos:document.documentElement.clientHeight
  10.             }
  11.         }
  12.         getPos = () => {
  13.             this.setState({
  14.                 xPos:document.documentElement.clientWidth,
  15.                 yPos:document.documentElement.clientHeight
  16.             })
  17.         }
  18.         componentDidMount(){
  19.             window.addEventListener('resize',this.getPos)
  20.         }
  21.         componentWillUnmount(){
  22.             window.removeEventListener('resize',this.getPos)
  23.         }
  24.         render(){
  25.             return <Component {...this.state}/>
  26.         }
  27.     }  
  28. }

Foo组件只关心视图部分，公用逻辑交给高阶组件处理即可

  1. import React from 'react'
  2. import withSize from './CommonComponent'
  4. class Foo extends React.Component{
  5.     render(){
  6.         return(
  7.             <div>
  8.                 <p>x:{this.props.xPos},y:{this.props.yPos}</p>
  9.             </div>
  10.         )
  11.     }
  12. }
  13. const FooWithSize = withSize(Foo)
  14. export default FooWithSize

这样就实现了高阶组件，可以看出高阶组件的主要功能是封装并分离组件的通用逻辑，让通用逻辑更好的被复用，本质上是装饰者设计模式，高阶组件的参数可以有多个。

注意事项

  1. 不要在组件的render方法中使用高阶组件，尽量不要在组件的其他生命周期方法中使用高阶组件，因为高阶组件每次都会返回一个新的组件，在render中使用会导致每次渲染出来的组件都不相同，于是每次render，组件都会卸载，然后重新挂载，既影响了效率，又丢失了组件的及其子组件的状态
  2. Refs不会被传递给包装组件