高阶阶阶阶阶阶组件

一、高阶组件

高阶组件的英文是 Higher-Order Components，简称为 HOC；

官方的定义：高阶组件是参数为组件，返回值为新组件的函数；

可以进行如下的分析：

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

高阶组件的调用过程：

const EndComponent = higherOrderComponent(WrappedComponent);

编写过程：

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

组件的名称都可以通过displayName来修改：

function higherOrderComponent(WrapperComponent) {
   
  return class NewComponent extends PureComponent {
   
    render() {
   
      return <WrapperComponent/>
    }
  }
  NewComponent.displayName = "hight";
  return NewComponent;
}

完整如下：

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. props的增强

在需要用到同一个相同的属性时可以进行增强，如下的region

import React, {
    PureComponent } from 'react';

// 定义一个高阶组件用于增强
function enhanceRegionProps(WrappedComponent) {
   
  return props =>{
   
    return <WrappedComponent {
   ...props} region="China"/>
  }
}

class Home extends PureComponent {
   
  render() {
   
    return <h2>Home: {
   `昵称: ${
     this