摘要：也就是說，如果能處理名為的這個高階組件返回的組件則完全無視這個。先展示我是一個組件，我設置了兩秒，之后展示倒計時完成

高階部件是一種用于復用組件邏輯的高級技術，它并不是 React API的一部分，而是從React 演化而來的一種模式。 具體地說，高階組件就是一個接收一個組件并返回另外一個新組件的函數(shù)！

這是官方文檔說的，我沒有截全，因為后面的解釋會造成誤解，但簡單講高階組件（函數(shù)）就好比一個加工廠，同樣的，屏幕、cpu、揚聲器、鍵盤按鍵、外殼、電池，小米手機工廠組裝完就是小米手機，魅族手機組裝完就是魅族手機，基本材料都是相同的，不同工廠（高階組件）有不同的實現(xiàn)及產(chǎn)出，當然這個工廠（高階組件）也可能是針對某個基本材料的處理。
總之產(chǎn)出的結果擁有了輸入組件不具備的功能，輸入的組件可以是一個組件的實例，也可以是一個組件類，還可以是一個無狀態(tài)組件的函數(shù)。

隨著項目越來越復雜，開發(fā)過程中，多個組件需要某個功能，而且這個功能和頁面并沒有關系，所以也不能簡單的抽取成一個新的組件，但是如果讓同樣的邏輯在各個組件里各自實現(xiàn)，無疑會導致重復的代碼。比如頁面有三種彈窗一個有title，一個沒有，一個又有右上角關閉按鈕，除此之外別無它樣，你總不能整好幾個彈窗組件吧，這里除了tilte,關閉按鈕其他的就可以做為上面說的基本材料。

代理方式

操縱prop

訪問ref（不推薦）

抽取狀態(tài)

包裝組件

繼承方式

操縱生命周期

操縱prop

刪除prop

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

增加prop

接下來我把簡化了寫法，把匿名函數(shù)去掉，同時換成箭頭函數(shù)

import React from "react"

const HocAddProp = (WrappedComponent，uid) =>
  class extends React.Component {
    render() {
      const newProps = {
        uid,
      };
      return 
    }
  }

export default HocAddProp;

上面HocRemoveProp高階組件中，所做的事情和輸入組件WrappedComponent功能一樣，只是忽略了名為user的prop。也就是說，如果WrappedComponent能處理名為user的prop,這個高階組件返回的組件則完全無視這個prop。

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

這是一個利用es6語法技巧，經(jīng)過上面的語句，otherProps里面就有this.props中所有的字段除了user.
假如我們現(xiàn)在不希望某個組件接收user的prop,那么我們就不要直接使用這個組件，而是把這個組件作為參數(shù)傳遞給HocRemoveProp，然后我們把這個函數(shù)的返回結果當作組件來使用
兩個高階組件的使用方法：

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

也可以利用decorator語法糖這樣使用

import React, { Component } from "React";

@HocRemoveProp 
class SampleComponent extends Component {
render() {}
}
export default SampleComponent;

將所有的狀態(tài)的管理交給外面的容器組件，這個模式就是 抽取狀態(tài)
外面的容器就是這個高階組件

const HocContainer = (WrappedComponent) =>
  class extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        name: ""
      }
    }
    onNameChange = (event) => {
      this.setState({
        name: event.target.value
      })
    }
    render() {
      const newProps = {
        name: {
          value: this.state.name,
          onChange: this.onNameChange
        }
      }
      return 
    }
  }

@HocContainer
class SampleComponent extends React.Component {
  render() {
    return 
  }
}

這樣當我們在使用這個已經(jīng)被包裹的input組件（SampleComponent）時候
它的值就被放在了HocContainer高階組件中，當很多這樣的input組件都用這個HocContainer高階組件時，那么它們的值都將保存在這個HocContainer高階組件中

const HocStyleComponent = (WrappedComponent, style) =>
  class extends React.Component {
    render() {
      return (
        

          
        
      )
    }
  }

這樣使用

import HocStyleComponent from  "./HocStyleComponent";
const colorSytle ={color:"#ff5555"}
const  newComponent = HocStyleComponent(SampleComponent, colorSytle);

-代理方式的生命周期的過程類似于堆棧調(diào)用:
didmount 一> HOC didmount 一>(HOCs didmount) 一>(HOCs will unmount) 一>HOC will unmount一>unmount

const MyContainer = (WrappedComponent) =>
  class extends WrappedComponent {
    render() {
      return super.render();
    }
  }

這個例子很簡單，相當于把WrappedComponent組件的render方法，通過super.render()方法吐到了MyContainer 中，可以順序調(diào)用。

繼承方式的生命周期的過程類似于隊列調(diào)用:

didmount 一> HOC didmount 一>(HOCs didmount) 一>will unmount一>HOC will unmount一> (HOCs will unmount)

代理方式下WrappedComponent會經(jīng)歷一個完整的生命周期，產(chǎn)生的新組件和參數(shù)組件是兩個不同的組件，一次渲染，兩個組件都會經(jīng)歷各自的生命周期，

在繼承方式下，產(chǎn)生的新組件和參數(shù)組件合二為一，super.render只是生命周期中的函數(shù)，變成一個生命周期。

來看下面的例子你就會明白了。

首先創(chuàng)建一個高階，在創(chuàng)建一個使用高階組件的組件，也就是是輸入組件，最后我在改變這個輸入組件props

import * as React from "react";

const HocComponent = (WrappedComponent) =>
  class MyContainer extends WrappedComponent {
    render() {
      if (this.props.time && this.state.success) {
        return super.render()
      }
      return 
倒計時完成了...
    }
  }

這個高階組件會直接讀取輸入組件中的props,state,然后控制了輸入組件的render展示
只有在props.time和state.success同時為真的時候才會展示

import * as React from "react";
import HocComponent from "./HocComponent"

@HocComponent

class DemoComponent extends React.Component {
  constructor(props) {
    super(props);
   this.state = {
    success: true,
   };
 }
  render() {
    return   
我是一個組件
  }
} 
export default DemoComponent;

然后調(diào)用，遞減time數(shù)值直到變?yōu)?

最后頁面的效果就是，當然他不是循環(huán)的。先展示”我是一個組件“，我設置了兩秒，之后展示”倒計時完成“.