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

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

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

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

代理方式

操縱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í)換成箭頭函數(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,這個(gè)高階組件返回的組件則完全無視這個(gè)prop。

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

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

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)的管理交給外面的容器組件，這個(gè)模式就是 抽取狀態(tài)
外面的容器就是這個(gè)高階組件

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 
  }
}

這樣當(dāng)我們在使用這個(gè)已經(jīng)被包裹的input組件（SampleComponent）時(shí)候
它的值就被放在了HocContainer高階組件中，當(dāng)很多這樣的input組件都用這個(gè)HocContainer高階組件時(shí)，那么它們的值都將保存在這個(gè)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();
    }
  }

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

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

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

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

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

來看下面的例子你就會(huì)明白了。

首先創(chuàng)建一個(gè)高階，在創(chuàng)建一個(gè)使用高階組件的組件，也就是是輸入組件，最后我在改變這個(gè)輸入組件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 
倒計(jì)時(shí)完成了...
    }
  }

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

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   
我是一個(gè)組件
  }
} 
export default DemoComponent;

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

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