高阶函数你知道，那高阶组件呢？

一个函数接受函数入参并返回一个函数称之为高阶函数，同理可得 一个组件接受一个组件并返回一个新的组件称为高阶组件，本质上还是一个高阶函数。

简介

高阶组件更像一个容器，接受传入的组件并渲染，并可在此基础上扩展功能，感觉有点像 component :is + mixins两个的结合（个人看法）。

高阶组件HOC

既然是高阶函数就得使用纯函数方法来实现，接受组件并使用render渲染， 这就是基本的结构。目前只是实现了组件渲染，还无法接受props和处理事件。

export default function hoc (baseComponent) {
  return {
    name: 'HOC',
    render (h) {
      return h(baseComponent)
    }
  }
}

h 函数的第二参数接受一个与模板中 attribute 对应的数据对象,所以在这里透传 $attrs和 $listeners

这里注意要先把传入组件的props绑定到高阶组件上，render时再通过this.$props传递

export default function hoc (baseComponent) {
  return {
    name: 'HOC',
    props: baseComponent.props,
    render (h) {
      return h(baseComponent,
      {
        on: this.$listeners,
        props: this.$props
      })
    }
  }
}

props处理了那非props的attribute和slot也得传递下去。

对于插槽需手动更改 content的this指向，并将slot通过h函数的第三个参数传递下去。 一个高阶组件生产函数就基本完成。

export default function hoc (baseComponent) {
  return {
    name: 'HOC',
    props: baseComponent.props,
    render (h) {
    const slots = Object.keys(this.$slots)
        .reduce((arr, sk) => arr.concat(this.$slots[sk]), [])
        // 手动更正 context
        .map(vnode => {
          vnode.context = this._self // 绑定到高阶组件上
          return vnode
        })
      return h(baseComponent,
      {
        on: this.$listeners,
        attrs: this.$attrs,
        props: this.$props,
        scopedSlots: this.$scopedSlots,
      }, slots)
    }
  }
}

应用场景

在一些营销页面对用户阅读停留时间统计上报，或在组件基础上进行功能扩展并保留原来的组件行为等等。

数据统计示例

在创建与销户生命周期完成统计上报，并且不改变原组件。

export default function CRUDFormDialogHoc (baseComponent) {
  let startTime = 0
  return {
    created () {
      startTime = new Date().valueOf()
    },
    beforeDestroy () {
      console.log('停留时长', new Date().valueOf() - startTime + 'ms')
      // 一些上报逻辑
    },
    render (h) {
     // 此次省略...
    }
  }
}

总结

高阶组件能在不改变原组件数据同时进行扩展相比于mixins好一点，但多层级嵌套也存在额外的开销，毕竟组件都会注入vue实例，应用还得结合实际选择。

总之即使用不上但得知道，不然那天面试官问到了一脸懵（比如我）。