高阶组件是重用组件逻辑的高级方法。基本上，这是从React的构图本质中衍生出来的一种模式。 HOC是自定义的组件，它包含了另一个组件。他们可以接受任何动态提供的子组件，但不会修改或复制其输入组件中的任何行为。你可以说HOC是“纯”的组件

1. 高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。
2. 高阶组件的作用是用于代码复用，可以把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件通过 props 传递信息。

// wrapWithLoadData.js （HoC 高阶组件）
import React, {} from 'react'
export default (WrappedComponent, name) => {
    class NewComponent extends Component {
        constructor () {
            super()
            this.state = {data: null}
        }
        componentWillMount () {
          let data = localStorage.getItem(name)  //从localStorage 拿本地缓存数据
          this.setState({ data })
        }
        render() {
            return <WrappedComponent data={this.state.data} />
        }
    }
    return NewComponent
}

//InputWithUserName .js
import wrapWithLoadData from './wrapWithLoadData'

class InputWithUserName extends Component {
  render () {
    return <input value={this.props.data} />
  }
}

InputWithUserName = wrapWithLoadData(InputWithUserName, 'username')
export default InputWithUserName

使用HoC的好处

1. 代码复用，代码模块化
2. 增删改props
3. 渲染劫持