react組件中的constructor和super小知識

react組件中的constructor和super小知識

 

一、react中用class申明的類一些小知識

如上圖：類Child是經過class關鍵字申明，而且繼承於類React。

A、Child的類型是？   typeof  Child   ===  'function'  ， 其實就至關於ES5用function申明的構造函數    function Child() {  //申明構造函數  }

B、Child類調用時候(  new Child() )，會優先執行，而且自動執行Child的constructor函數。

constructor() {
   console.log('執行了constructor')
       return 'hah'
   }

   getName() {
       console.log('執行了方法')
   }
}
var dd = new Person();
console.log(dd)

打印以下：

三、Child類中的this？    this指向Child的實例，至關於 new Child()   那麼它們徹底相等嗎？  不是的，react中的this是在new Child()基礎上進行了包裹（下圖）。

             上圖爲new Child（）      下圖爲 Child中的this

 

結論：this是在new Child()基礎上進行了包裹，包含了一些react內部方法，

同時組件中使用Child類(  <div>  <Child /> </div> )，能夠當作 new Child（） + react包裹。（細節待追究。。。）

 

二、組件中的constructor是否有必要？ 若是沒有呢？？做用呢？？？

ES6的知識補充：  http://es6.ruanyifeng.com/#docs/class-extends   以下：

 

class ColorPoint extends Point {
}

// 等同於 
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

// 可見沒有寫constructor，在執行過程當中會自動補上

 

由ES6的繼承規則得知，無論子類寫不寫constructor，在new實例的過程都會給補上constructor。

因此：constructor鉤子函數並非不可缺乏的，子組件能夠在一些狀況略去。

 

接下來，繼續看下有沒有constructor鉤子函數有什麼區別：

 

A、先看有無constructor鉤子函數的 this.constructor  

     有constructor鉤子函數的 this.constructor 

 

      無constructor鉤子函數的 this.constructor 

若是能看細節的話，會得知 有constructor鉤子函數時候，Child類會多一個constructor方法。

 

B、再看有無先看有無constructor鉤子函數的 this，也就是組件實例。

     有constructor鉤子函數的 this實例。

     無constructor鉤子函數的 this實例。

會得知 有constructor鉤子函數時候，能夠定義state，若是用戶不定義state的話，有無constructor鉤子函數時候沒有區別。

 

結論： 若是組件要定義本身的state初始狀態的話，須要寫在constructor鉤子函數中，

若是用戶不使用state的話，純用props接受參數，有沒有constructor鉤子函數均可以，能夠不用constructor鉤子函數。

再者若是不使用state，那麼爲何不使用 無狀態組件（建議使用） 呢？？？

 

三、super中的props是否必要？ 做用是什麼？？

有的小夥伴每次寫組件都會習慣性在constructor和super中寫上props，那麼這個是必要的嗎？？

如圖：   

 

首先要明確很重要的一點就是：

能夠不寫constructor，一旦寫了constructor，就必須在此函數中寫super(),

此時組件纔有本身的this，在組件的全局中均可以使用this關鍵字，

不然若是隻是constructor 而不執行 super() 那麼之後的this都是錯的！！！

來源ES6 ： http://es6.ruanyifeng.com/#docs/class-extends   

 

 可是super中必須寫參數props嗎？？   答案是不必定，先看代碼：

有props：

 

無props：

 

能夠得出結論：當想在constructor中使用this.props的時候，super須要加入(props)，

此時用props也行，用this.props也行，他倆都是一個東西。（不過props能夠是任意參數，this.props是固定寫法）。

如圖：

 

 若是在custructor生命週期不使用 this.props或者props時候，能夠不傳入props。

下面是一個使用props的場景，此時別忘了 componentWillReceiveProps 生命週期喲。

參考另外一篇文章  react的生命週期須要知道的

 

接上：若是constructor中不經過super來接收props，在其餘生命週期，

諸如componentWillMount、componentDidMount、render中能直接使用this.props嗎？？

結論：能夠的，react在除了constructor以外的生命週期已經傳入了this.props了，徹底不受super(props)的影響。

 

因此super中的props是否接收，只能影響constructor生命週期可否使用this.props，其餘的生命週期已默認存在this.props