React 高阶组件

高阶函数

• 函数可以作为参数被传递

image

• 函数可以作为返回值输出

image

高阶组件

• 高阶组件接受一个组件作为参数，并返回一个新组件的函数
• 高阶组件是一个函数，并不是组件，只是为了方便而这么称呼

使用高阶组件

1. higherOrderComponent(WrappedComponent)

   

   image

2. @higherOrderComponent 装饰器

高阶组件应用

• 代理方式

  返回的新组件直接继承React.Component类，新组件扮演的角色是传入组件的代理，在新组件的render函数中，将被包裹组件渲染出来，除了高阶组件自己做的工作，其余功能全部转手给了被包裹组件

• 继承方式

  采用继承关联作为参数的组件和返回的组件，假如传入的组件参数是WrappedComponent,那么返回的组件就直接继承自WrappedComponent,这样就可以更改传入组件的生命周期或是一些属性和方法

代理方式高阶组件

• 操作props

  

  新增props

  新增属性

  

  删除属性

  属性删除

• 访问ref

• 抽取状态 把input的状态控制提取出来

  [图片上传失败...(image-20394e-1560324084744)]

  受控组件 在传入组件内部的input直接展开{...this.newProps}

• 包装组件

继承方式高阶组件

image

• 操纵props
• 操作生命周期

尽量使用代理方式，这样对原组件的侵入方式比较小，而继承方式，很容易影响到传入进来的组件

高阶组件名称

image

高阶组件的静态属性 displayName 就是组件名