什么是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
