React中自定义高阶组件的应用（HOC）

什么是HOC?

HOC(Higher-order component)是一种React 的进阶使用方法，只要还是为了便于组件的复用。强调一点，HOC本身并不是 React API, 它就是一个方法，一个接收一个组件作为参数，返回一个增强的组件的方法。

什么时候使用HOC

在组件挂载前需要在 localStorage 中取出 data 的值，但当其他组件也需要从 localStorage 中取出同样的数据进行展示的话，每个组件都需要重新写一遍 componentWillMount 的代码，那就会显得非常冗余。

概括的讲，HOC能够实现：

1. 代码复用，代码模块化
2. 渲染劫持, 操作state
3. Props 增删改

所以在 React 中我们需要采用HOC模式

import React, { Component } from 'react'
import oldComponent from '../index'

const newComponent = oldComponent => {
  return class extends Component{
    componentWillMount() {
      let data = localStorage.getItem('data')
      this.setState({ data })
    }

    render() {
      return <oldComponent data={this.state.data} {...this.props} /> 
    }
  }
}

export default newComponent