当初要是看了这篇，React高阶组件早会了。

概况：

什么是高阶组件？

高阶部件是一种用于复用组件逻辑的高级技术，它并不是 React API的一部分，而是从React 演化而来的一种模式。 具体地说，高阶组件就是一个接收一个组件并返回另外一个新组件的函数！

这是官方文档说的，我没有截全，因为后面的解释会造成误解，但简单讲高阶组件（函数）就好比一个加工厂，同样的，屏幕、cpu、扬声器、键盘按键、外壳、电池，小米手机工厂组装完就是小米手机，魅族手机组装完就是魅族手机，基本材料都是相同的，不同工厂（高阶组件）有不同的实现及产出，当然这个工厂（高阶组件）也可能是针对某个基本材料的处理。
总之产出的结果拥有了输入组件不具备的功能，输入的组件可以是一个组件的实例，也可以是一个组件类，还可以是一个无状态组件的函数。

解决什么问题？

随着项目越来越复杂，开发过程中，多个组件需要某个功能，而且这个功能和页面并没有关系，所以也不能简单的抽取成一个新的组件，但是如果让同样的逻辑在各个组件里各自实现，无疑会导致重复的代码。比如页面有三种弹窗一个有title，一个没有，一个又有右上角关闭按钮，除此之外别无它样，你总不能整好几个弹窗组件吧，这里除了tilte,关闭按钮其他的就可以做为上面说的基本材料。

高阶组件总共分为两大类

• 代理方式
  1. 操纵prop
  2. 访问ref（不推荐）
  3. 抽取状态
  4. 包装组件
• 继承方式
  1. 操纵生命周期
  2. 操纵prop

代理方式之 操纵prop

删除prop

import React from 'react' function HocRemoveProp(WrappedComponent) {   return class WrappingComPonent extends React.Component {     render() {       const { user, ...otherProps } = this.props;       return <WrappedComponent {...otherProps} />     }   } } export default HocRemoveProp; 

增加prop

接下来我把简化了写法，把匿名函数去掉，同时换成箭头函数

import React from 'react'  const HocAddProp = (WrappedComponent，uid) =>   class extends React.Component {     render() {       const newProps = {         uid,       };       return <WrappedComponent {...this.props}  {...newProps}  />     }   }  export default HocAddProp; 

上面HocRemoveProp高阶组件中，所做的事情和输入组件WrappedComponent功能一样，只是忽略了名为user的prop。也就是说，如果WrappedComponent能处理名为user的prop,这个高阶组件返回的组件则完全无视这个prop。

const { user, ...otherProps } = this.props;

这是一个利用es6语法技巧，经过上面的语句，otherProps里面就有this.props中所有的字段除了user.
假如我们现在不希望某个组件接收user的prop,那么我们就不要直接使用这个组件，而是把这个组件作为参数传递给HocRemoveProp，然后我们把这个函数的返回结果当作组件来使用
两个高阶组件的使用方法：

const  newComponent = HocRemoveProp(SampleComponent); const  newComponent = HocAddProp(SampleComponent,'1111111');

也可以利用decorator语法糖这样使用

import React, { Component } from 'React';  @HocRemoveProp  class SampleComponent extends Component { render() {} } export default SampleComponent;

代理方式之 抽取状态

将所有的状态的管理交给外面的容器组件，这个模式就是 抽取状态
外面的容器就是这个高阶组件

                        
关键字：