HOC

HOC 常用用途及场景

• 强化props 追加额外的props 如 react-router 的 withRoute
• 渲染劫持 无数据追加暂无数据 或 为组件渲染增加loading效果
• 配合import 实现动态加载组件 并带有loading 效果
• 通过ref 获取组件实例， 操作实例下的属性或方法, 监听组件的时间触发， 统一追加防抖节流等效果
• 对永远是组件做一些事件监听, 错误监控等

HOC 注意事项

• 谨慎修改原型链
• 不要在函数组件内部或类组件render函数中使用HOC

// render diff 无法复用合理的DOM节点 造成性能的浪费
class Index extends Component {
  render() {
    const WrapHome = HOC(Home)
    return <WrapHome />
  }
}
function Index() {
  const WrapHome = HOC(Home)
  return <WrapHome />
}

• class 声明的类组件 可以使用ES6的装饰器对组件进行赋能

// 注意HOC嵌套顺序问题 HOC 的依赖关系
@HOC1(styles)
@HOC2
@HOC3
class Index extends Component {

}

function Index() {

}
export default HOC1(styles)(HOC2(HOC3(Index)))

• HOC本质上是返回了一个新的component, 如果原来的component含有一些静态属性或方法 注意需copy到HOC上否则会导致静态属性或方法的丢失

function Hoc(component) {
  class WrappedComponent extends component {

  }
  // 是否可以使用Object.keys 动态copy 员组件上的静态属性或方法 参见 hoist-non-react-statics 的实现
  wrappedComponent.staticMethod = Component.staticMethods
  return WrappedComponent
}