React - 什么是高阶组件？

props 代理

• 通过 ref 访问实例的方法和实例本身

可以通过 ref 访问到 WrappedComponent 的实例，但为了得到引用，WrappedComponent 必须得初始渲染，需要在 HOC 的 render 方法中返回 WrappedComponent 元素。
Ref 的回调函数会在 WrappedComponent 渲染时执行，你就可以得到 WrappedComponent 的引用。这可以用来读取/添加实例的 props ，调用实例的方法。

function refsHOC(WrappedComponent) {
  return class RefsHOC extends React.Component {
    proc(wrappedComponentInstance) {
      wrappedComponentInstance.method()
    }

    render() {
      const props = Object.assign({}, this.props, {ref: this.proc.bind(this)})
      return <WrappedComponent {...props}/>
    }
  }
}

<WrappedComponent {...this.props}/>
// 等价于
React.createElement(WrappedComponent, this.props, null)

• 用其他元素包裹 WrappedComponent

function ppHOC(WrappedComponent) {
  return class PP extends React.Component {
    render() {
      return (
        <div style={{display: 'block'}}>
          <WrappedComponent {...this.props}/>
        </div>
      )
    }
  }
}

反向继承

HOC 通过 this 访问到 WrappedComponent，意味着它可以访问到 state、props、组件生命周期方法和 render 方法

• 渲染劫持（Render Highjacking）
  HOC 控制着 WrappedComponent 的渲染输出

function iiHOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}