源自：coderwhy
一. 高阶组件
1.1. 认识高阶组件
什么是高阶组件呢？相信很多同学都听说过，也用过 高阶函数，它们非常相似，所以我们可以先来回顾一下什么是 高阶函数。
高阶函数的维基百科定义：至少满足以下条件之一：
JavaScript中比较常见的filter、map、reduce都是高阶函数。
那么说明是高阶组件呢？
- 高阶组件的英文是 Higher-Order Components，简称为 HOC；
- 官方的定义：高阶组件是参数为组件，返回值为新组件的函数；
我们可以进行如下的解析：
- 首先， 高阶组件 本身不是一个组件，而是一个函数；
- 其次，这个函数的参数是一个组件，返回值也是一个组件；
高阶组件的调用过程类似于这样：
const EnhancedComponent = higherOrderComponent(WrappedComponent);
高阶函数的编写过程类似于这样：
function higherOrderComponent(WrapperComponent) { return class NewComponent extends PureComponent { render() { return } }}
在ES6中，类表达式中类名是可以省略的，所以可以可以写成下面的写法：
function higherOrderComponent(WrapperComponent) { return class extends PureComponent { render() { return } }}
另外，组件的名称都可以通过displayName来修改：
修改名称
完整的代码，我们可以这样来编写：
import React, { PureComponent } from 'react';function higherOrderComponent(WrapperComponent) { return class NewComponent extends PureComponent { render() { return } }}class App extends PureComponent { render() { return (
App
) }}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
Header {name + age}
}}export default class App extends PureComponent { render() { return (
我们可以通过一个高阶组件，让使用者在不破坏原有结构的情况下对某个组件增强props：
function enhanceProps(WrapperCpn, otherProps) { return props => }const EnhanceHeader = enhanceProps(Header, {height: 1.88})
利用高阶组件来共享Context
利用高阶组件来共享Context属性
import React, { PureComponent, createContext } from 'react';const UserContext = createContext({ nickname: "默认", level: -1})function Header(props) { return ( { value => { const { nickname, level } = value; return
Header {"昵称:" + nickname + "等级" + level}
