Vue HOC

什么是HOC?

HOC(Higher-order component)是一种React 的进阶使用方法，只要还是为了便于组件的复用。强调一点，HOC本身并不是 React API, 它就是一个方法，一个接收一个组件作为参数，返回一个增强的组件的方法。

什么时候使用HOC?

高阶组件的目的是解决一些交叉问题(Cross-Cutting Concerns)。而最早时候 React 官方给出的解决方案是使用 mixin 。但官方也意识到了使用mixins技术来解决此类问题所带来的困扰远高于其本身的价值。更多资料可以查阅官方说明。

在React开发过程中，在很多情况下，组件需要被“增强”（enhanced），比如给组件添加或修改一些特定的属性，针对多个组件的代码复用。

概括的讲，HOC能够实现：

代码复用，代码模块化
渲染劫持, 操作state
Props 增删改

HOC的实现方式

在这节中我们将学习两种主流的在 React 中实现高阶组件的方法：属性代理（Props Proxy）和反向继承（Inheritance Inversion）。

VUE如何实现

import microComponent from '@/views/common/micro-component.vue'

type createMicroProps = {
  title: string
  name: string
  url: string
}

const withMicroComponent = function({ title, name, url }: createMicroProps) {
  const mixin = {
    name,
    data() {
      return {
        title,
        name,
        url
      }
    }
  }
  return Object.create(microComponent, {
    mixins: {
      get() {
        const mixins = super.mixins || []
        return mixins.concat(mixin)
      }
    }
  })
}

import Vue from 'Vue'

export default const HOC = (component, text) => {
    return Vue.component('HOC', {
        render(createElement) {
            return createElement(component, {
                on: { ...this.$listeners },
                props: {
                    text: this.text
                }
            })
        },
        data() {
            return {
                text: text,
                hocText: 'HOC'
            }
        },
        mounted() {
            // do something ...
            console.log(this.text)
            console.log(this.hocText)
        }
    })
}

react HOC: https://www.jianshu.com/p/4143a6296994