02-高阶组件HOC-增强props

120 阅读2分钟

前言

我们知道HOC是一个函数,该函数接受组件作为参数,返回新组件,新的组件是对传递的原始组件的增强。

具体怎么做的,原始组件和新组件关系?

  • 定义一个函数,接受oringinCpn
  • 内部定义一个新的cpn extends PureComponents,该cpn render函数返回oringinCpn,最后函数返回新cpn

image.png

HOC增强props

HOC中新组件不能只是render 旧组件,这样没有意义,和直接引用旧组件一模一样,最关键的是此处可以把公共的属性以state形式定义在cpn constronetor中,并在返回render函数返回oringinCpn时候 {...this.state}形式放在HOC组件的props中

image.png

外层通过高阶组件的形式定义新组件,那么新组件默认就有了高阶组件中的state作为props属性

image.png

image.png

高阶组件接受参数可以是:函数组件和类组件

函数组件:

  • HOC参数为一个无名字的函数组件,该函数之间接受props参数,返回jsx,赋值给函数组件的名字
  • 函数组件只有props参数,组件内部的props拥有HOC增强后的props属性 image.png

类组件:

  • 正常定义rpce类组件,使用增强则在导出的时候,HOC(About)
  • 类组件内部不仅有增强的公共props还要有外层使用传入的props,因此HOC定义的时候,props有两种处理:{...this.state} {...this.props}
  • About内部的props既能拿到增强prop还有本身props image.png

难理解点整理

  1. HOC是一个函数,接受函数组件或者类组件,返回新组件,新组件目前用的是类组件
  2. 新组件可以对传入的组件做增强和公共处理,不管是传入的类组件还是函数组件,经过HOC处理后返回的是一个新类组件,该类组件render了传入组件,并给render的传入组件新的/统一的 props
  3. 定义传入的原始组件的时候,内部可以使用prop获取增强的props