共计 1186 个字符，预计需要花费 3 分钟才能阅读完成。
首先在正式的高阶组件之前我们先来了解一下函数的类似操作：
function hello () {
console.log(‘hello’)
}
function WrapperHello (fn) {
return function () {
console.log(‘before’)
fn && fn()
console.log(‘after’)
}
}
hello = WrapperHello(hello)
hello()
以上这段代码的输出会先输出 before，然后 hello，最后再是 after，hello 函数相当于在外包裹了一层统一逻辑再进行了返回，并且声明是又将原本的 hello 函数进行了覆盖，这就是高阶组件的基础原理。
然后我们再写一个基础的高阶组件对比一下：
import React, {Component, Fragment} from ‘react’
function WrapperHello (Comp) {
class WrapComp extends Component {
render () {
return (
<Fragment >
<div > 这是高阶组件特有的函数 </div >
<Comp {…this.props}/>
</Fragment >
)
}
}
return WrapComp
}
@WrapperHello
class Hello extends Component {
render () {
return (
<div >Hello</div >
)
}
}
export default Hello
那么在这呢，不难发现其实组件也是一个函数，我们采用了同种思想对其进行了统一的数据处理，在 WrapperHello 函数中传入的 Comp 组件，然后我们统一返回一个 WrapComp 函数，其中 Comp 在 render 的时候我们传入和父级传递的所有 props 进行数据的全部交互，然后再在 Hello 组件上我们用 @符号进行一个简易的写法，实际上就是和之前函数包裹一样的原理进行了一次声明，那么，我们最后输出的组件 Hello，他的显示就会包括了我们高阶组件中的‘<div > 这是高阶组件特有的函数 </div >’元素了。
高阶组件主要又分为属相代理和反向继承两种类型，举例中的函数就属于属相代理的类型。
反向继承的例子：
function WrapperHello (Comp) {
class WrapComp extends Component {
componentDidMount () {
console.log(‘ 高阶组件新增的生命周期, 加载完成 ’)
}
render () {
return (
<Fragment >
<Comp {…this.props}/>
</Fragment >
)
}
}
return WrapComp
}
我们可以通过 componentDidMount 来修改原有组件生命周期发生的事件，这就是反向继承的方式。
记住，高阶函数返回的是一个函数，我们只是对其进行了相对应的包装。
如果有好的建议和问题请指出，谢谢
