HOF: Higher-Order Function, 高阶函数,以函数作为参数,并返回一个函数
HOC: Higher-Order Component, 高阶组件,以组件作为参数,并返回一个组件

  1. <Comp1 /> React Component Element
  2. <h1 />React HTML Element

通常,可以利用HOC实现横切关注点(把功能点抽离出去,放到包装层);类似插件,可以增强组件的功能

举例:

  1. 20个组件,每个组件在创建组件和销毁组件时,需要做日志记录
  2. 20个组件,他们需要显示一些内容,得到的数据结构完全一致

用法

高阶组件可以一直组合(也就是可以多次包装),一直增强功能点
image.png

注意点

  1. 不要在render中使用高阶组件!!因为会不断的导致 销毁、重建 组件
  2. 不要在高阶组件内部修改传入的组件!!