【React系列】高阶组件

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. 高阶组件

1.1. 认识高阶组件

什么是高阶组件呢？相信很多同学都听说过，也用过 高阶函数，它们非常相似，所以我们可以先来回顾一下什么是 高阶函数。

高阶函数的维基百科定义：至少满足以下条件之一：

• 接受一个或多个函数作为输入；
• 输出一个函数；

JavaScript中比较常见的filter、map、reduce都是高阶函数。

那么什么是高阶组件呢？

• 高阶组件的英文是 Higher-Order Components，简称为 HOC；
• 官方的定义：高阶组件是参数为组件，返回值为新组件的函数；

我们可以进行如下的解析：

• 首先， 高阶组件 本身不是一个组件，而是一个函数；
• 其次，这个函数的参数是一个组件，返回值也是一个组件；

高阶组件的调用过程类似于这样：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

高阶函数的编写过程类似于这样：

function higherOrderComponent(WrapperComponent) {
   
   
  return class NewComponent extends PureComponent {
   
   
    render() {
   
   
      return <WrapperComponent/>
    }
  }
}

组件的名称问题：

• 在ES6中，类表达式中类名是可以省略的，所以可以可以写成下面的写法：

function higherOrderComponent(WrapperComponent) {
   
   
  return class extends PureComponent {
   
   
    render() {
   
   
      return <WrapperComponent/>
    }
  }
}

• 另外，组件的名称都可以通过displayName来修改：
  
  完整的代码，我们可以这样来编写：

import React, {
   
    PureComponent } from 'react';

function higherOrderComponent(WrapperComponent) {
   
   
  return class NewComponent extends PureComponent {
   
   
    render() {
   
   
      return <WrapperComponent/>
    }
  }
}

class App extends PureComponent {
   
   
  render() {
   
   
    return (
      <div>
        App
      </div>
    )
  }
}

export default higherOrderComponent(App);

高阶组件并不是React API的一部分，它是基于React的组合特性而形成的设计模式；

高阶组件在一些React第三方库中非常常见：

• 比如redux中的connect；
• 比如react-router中的withRouter；

在我们的开发中，高阶组件可以帮助我们做哪些事情呢？

1.2. 高阶组件的使用

1.2.1. props的增强

不修改原有代码的情况下，添加新的props

假如我们有如下案例：

class Header extends PureComponent {
   
   
  render() {
   
   
    const {
   
    name, age } = this.props;
    return <h2>Header {
   
   name + age}</h2>
  }
}

export default class App extends PureComponent {
   
   
  render() {
   
   
    return (
      <div>
        <Header name="aaa" age={
   
   18} />
      </div>
    )
  }
}

我们可以通过一个高阶组件，让使用者在不破坏原有结构的情况下对某个组件增强props：

function enhanceProps(WrapperCpn, otherProps) {
   
   
	return props => <WrapperCpn {
   
   ...props} {
   
   ...otherProps} />
}

const EnhanceHeader = enhanceProps(Header, {
   
   height: 1.88})

• 有点拦截器和java动态代理的意思

利用高阶组件来共享 Context 属性