很多时候比较坑的是，你根本不知道有这个东西
或者说你没有意识到你平常用的东西在别人眼中的价值

What ?

HOC (Higher-order component)
是一种React的进阶使用方法。

Why ?

便于组件的复用，获取一个组件，返回一个更高级的组件。

Where ?

• 代码复用，代码模块化
• 增删改props
• 渲染劫持

Code Example

// 修改 props
function control(wrappedComponent) {
  return class Control extends React.Component {
    render(){
      let props = {
        ...this.props,
        message: "You are under control"
      };
      return <wrappedComponent {...props} />
    }
  }
}

// 渲染劫持
function loading(wrappedComponent) {
  return class Loading extends React.Component {
    render(){
      if(this.props.data) {
        return <div>loading...</div>
      }
      return <wrappedComponent {...props} />
    }
  }
}