高阶组件 - HOC

       为了提高组件复用率，可测试性，就要保证组件功能单一性；但是若要满足复杂需求就要扩展功能单一的组件，再React 中就有了HOC(Higher-Order Components) 的概念，
定义：高阶组件就是参数为组件，返回值为新组件的函数。

基本使用

// hoc 是个函数，参数是组件，返回值是个新的组件
const foo = Cmp => props => {
  return (
      <div>
        <Cmp {...this.props} oops={oops}/>
      </div>
  )
};

function Child(props) {
  return <div> I'am is Chid</div>
}


// const Foo = foo(Child)
// 还可以实现链式调用，foo(Child)当做另外一个高阶组件的参数，不建议阅读性差
const Foo =foo(foo(Child))


// 装饰器的用法
// 装饰器 链式调用
@foo
@foo
@foo
class ClassChild extends Component {
  render() {
      return <div>Child Class</div>
  }
}

export default class HocPage extends Component {
  render() {
    return(
        <div>
          <h3>HocPage</h3>
          <Foo />
          <ClassChild />
        </div>
    )
  }
}

使用HOC 的注意事项

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

• 不要在 render 方法中使用HOC
  React的 diff 算法（称为协调）使用组件标识来确定它是应该更新现有子树还是将其丢弃并挂载新的子树。如果从render 返回的组件域名前一个渲染中的组件相同（===），则react 通过将子树与新子树进行区分来递归更新子树。如果它们不相等，则完全卸载前一个子树。

render() {
  // 每次调用render 函数都会创建一个新的 EnhancedComponent
// EnhancedComponent1 !== EnhancedComponent2

// 这将导致子树每次渲染都会进行卸载，和重新挂载的操作
return <EnhancedComponent />
}

这不仅仅是性能问题- 重新挂载组件会导致该组件及其所有子组件的状态丢失。