前言
我们知道HOC是一个函数,该函数接受组件作为参数,返回新组件,新的组件是对传递的原始组件的增强。
具体怎么做的,原始组件和新组件关系?
- 定义一个函数,接受oringinCpn
- 内部定义一个新的cpn extends PureComponents,该cpn render函数返回oringinCpn,最后函数返回新cpn
HOC增强props
HOC中新组件不能只是render 旧组件,这样没有意义,和直接引用旧组件一模一样,最关键的是此处可以把公共的属性以state形式定义在cpn constronetor中,并在返回render函数返回oringinCpn时候 {...this.state}形式放在HOC组件的props中
外层通过高阶组件的形式定义新组件,那么新组件默认就有了高阶组件中的state作为props属性
高阶组件接受参数可以是:函数组件和类组件
函数组件:
- HOC参数为一个无名字的函数组件,该函数之间接受props参数,返回jsx,赋值给函数组件的名字
- 函数组件只有props参数,组件内部的props拥有HOC增强后的props属性
类组件:
- 正常定义rpce类组件,使用增强则在导出的时候,HOC(About)
- 类组件内部不仅有增强的公共props还要有外层使用传入的props,因此HOC定义的时候,props有两种处理:{...this.state} {...this.props}
- About内部的props既能拿到增强prop还有本身props
难理解点整理
- HOC是一个函数,接受函数组件或者类组件,返回新组件,新组件目前用的是类组件
- 新组件可以对传入的组件做增强和公共处理,不管是传入的类组件还是函数组件,经过HOC处理后返回的是一个新类组件,该类组件render了传入组件,并给render的传入组件新的/统一的 props
- 定义传入的原始组件的时候,内部可以使用prop获取增强的props