react中高階組件

react高階組件深刻理解、做用以及應用

本文主要以通俗易懂的語言表達本身對高階組件的一些看法，但願你們多多提問

高階組件深刻理解

• 高階組件就是一個函數，傳給它一個組件，它返回一個新的組件。新的組件使用傳入的組件做爲子組件。
• 首先根據定義咱們明白它就是一個函數，並且它必須有返回值，返回值是一個組件，固然這裏咱們高階組件能夠嵌套（這裏是一篇入門的文章，以後我會更新高階組件多層嵌套）

高階組件的做用

一直以來咱們都是看到新的知識都是一直學習，一直看官方文檔，沒有靜下心來想想到底爲何這個新知識可以在這個時候出現？爲何它剛出現就這麼火？它到底在什麼狀況下用？它能解決什麼問題……等等這一系列的問題

• 我第一次見到這個詞是在redux中解讀connect組件時，看到這個詞，官方文檔也有具體說明我的推薦到這裏去看，比官方文檔，解釋的更好
• 其實高階組件就是把公用的一些部分提出來，把修改的部分以參數的形勢傳進去，在這裏可能有人會說這那需用什麼高階組件，我本身封裝一個組件也能夠達到一樣的效果，簡單的組件在這裏你可能經過封裝來實現，可是我舉兩個例子你們在想一下怎麼經過組建封裝來實現：一、antd組件的form組件，二、咱們在redux中組件頂部寫一行代碼@connect以後就能夠在組件中經過this.props訪問store中的數據和一些修改數據的方法
• 這裏也許也會有一些大牛說我能夠實現，可是大牛畢竟比較少，可能許多程序員在心理都會以爲本身是大牛，在這裏我能夠告你們一個檢測本身實力的方法：就是沒事的時候把創建投一下阿里或者是京東，而後去面試一下，我敢保證許多人就會現行；

高階組件的用處

• 說了那麼多廢話，說點有用的吧，高階組件通常用在那些地方呢
• 咱們從一個實際問題來理解並學習高階組件：有相似的幾個組件可是組件內部只有少部分是不一樣的，它們身上都還有一些公用的方法，而且這些少部分組件組件都還要調用大組件的方法或者訪問它的一些數據
• 咱們來分一下：1，這幾個組件的大部分樣式和功能是相同的，咱們能夠能夠思考能不能只寫一次；二、它們不一樣的地方還會觸發一些相同的方法；三、不一樣的地方只是內部的一小部分
• 若是咱們按照組件封裝的方法來實現的的話，咱們封裝一個大組件，而後把不一樣的小組件傳進去，而後經過props把方法傳到小組件，經過回調觸發，可是這裏有一個問題，咱們寫這幾個組件的時候每次都要把大組件寫一遍而後把子組件嵌入進去
• 加入這裏咱們採用高階組件來實現的話，咱們只須要把公用的方法和數據寫到高階函數返回的組件中，而後把組件傳進去就能夠了，最後在每一個調用這個大組件的地方直接調用這個函數就能夠了。

• 在上圖中咱們的代碼能夠這樣來實現

  //先寫高階組件
  export default class HigherOrderComponent(InputComponent){
      return class NewComponent extends Component{
          constructor(){
              super()
              this.state={
                  initalState:123
              }
          }
          commonFunc=()=>{
          }
          render(){
              return(
                  <InputComponent data={this.state.initialSate} fun={this.commonFnn}/>
              )
          }
      }
  }
  //再來寫outerComponent
  import HigherOrderComponent from 'HigherOrderComponent';
  import MinComponent1 from 'MinComponent1';
  import MinComponent2 from 'MinComponent2';
  class OuterComponent extends Component{
      render(){
          return(
              <div>
                  {HigherOrderComponent(minComponent1)}
                  {HigherOrderComponent(minComponent2)}
              </div>
          )
      }
  }
  這樣這個outerComponent就寫完了,直接在這個編輯器裏寫的，代碼可能會有如下小的錯誤，你們諒解

• 你們能夠考慮一下這個組件加入要用咱們組件封裝嵌套的方式寫的話能不能也寫的簡單點，歡迎你們在評論區寫上本身的實現方式，方便你們一塊兒討論

高階組件的應用

• 上面一不當心連高階組件的應用也寫了，大概就是這麼個過程，但願能夠對你們有一些幫助
• 下班了，看明天有時間我把那兩個小組件也更新一下，咱們在小組件中能夠經過this.props來訪問高階組件的方法和數據

謝謝……