react組件中的constructor和super小知識

 

1、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)

打印如下：

3、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包裹。（細節待追究。。。）

 

2、組件中的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，那么為什么不使用 無狀態組件（建議使用） 呢？？？

 

3、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