什么是HOC?

HOC(Higher-order component)是一種React 的進階使用方法，只要還是為了便于組件的復用。強調一點，HOC本身并不是 React API, 它就是一個方法薄坏，一個接收一個組件作為參數(shù)兄渺，返回一個增強的組件的方法缝龄。

什么時候使用HOC?

高階組件的目的是解決一些交叉問題(Cross-Cutting Concerns)汰现。而最早時候 React 官方給出的解決方案是使用 mixin 。但官方也意識到了使用mixins技術來解決此類問題所帶來的困擾遠高于其本身的價值叔壤。更多資料可以查閱官方說明瞎饲。

在React開發(fā)過程中，在很多情況下炼绘，組件需要被“增強”（enhanced）嗅战，比如給組件添加或修改一些特定的屬性，針對多個組件的代碼復用俺亮。

概括的講驮捍，HOC能夠實現(xiàn)：

1. 代碼復用，代碼模塊化

2. 渲染劫持, 操作state

3. Props 增刪改

HOC的實現(xiàn)方式

在這節(jié)中我們將學習兩種主流的在 React 中實現(xiàn)高階組件的方法：屬性代理（Props Proxy）和 反向繼承（Inheritance Inversion）脚曾。

VUE如何實現(xiàn)

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: http://www.reibang.com/p/4143a6296994