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

如上圖：類Child是通過class關鍵字申明，并且繼承于類React。

A、Child的類型是？ typeofChild === 'function' ， 其實就相當于ES5用function申明的構造函數 function Child() { //申明構造函數 }

B、Child類調用時候( new Child() )，會優(yōu)先執(zhí)行，并且自動執(zhí)行Child的constructor函數。

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

   getName() {
       console.log('執(zhí)行了方法')
   }
}
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包裹。（細節(jié)待追究。。。）

2、組件中的constructor是否有必要？ 如果沒有呢？？作用呢？？？

ES6的知識補充： http://es6.ruanyifeng.com/ 如下：

class ColorPoint extends Point {
}

// 等同于 
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}
// 可見沒有寫constructor，在執(zhí)行過程中會自動補上

由ES6的繼承規(guī)則得知，不管子類寫不寫constructor，在new實例的過程都會給補上constructor。

所以：constructor鉤子函數并不是不可缺少的，子組件可以在一些情況略去。

接下來，繼續(xù)看下有沒有constructor鉤子函數有什么區(qū)別：

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

有constructor鉤子函數的 this.constructor

無constructor鉤子函數的 this.constructor

如果能看細節(jié)的話，會得知有constructor鉤子函數時候，Child類會多一個constructor方法。

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

有constructor鉤子函數的 this實例。

無constructor鉤子函數的 this實例。

會得知有constructor鉤子函數時候，可以定義state，如果用戶不定義state的話，有無constructor鉤子函數時候沒有區(qū)別。

結論： 如果組件要定義自己的state初始狀態(tài)的話，需要寫在constructor鉤子函數中，

如果用戶不使用state的話，純用props接受參數，有沒有constructor鉤子函數都可以，可以不用constructor鉤子函數。

再者如果不使用state，那么為什么不使用 無狀態(tài)組件（建議使用）呢？？？

3、super中的props是否必要？ 作用是什么？？

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

如圖：

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

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

此時組件才有自己的this，在組件的全局中都可以使用this關鍵字，

否則如果只是constructor 而不執(zhí)行 super() 那么以后的this都是錯的！?。?/p>

來源ES6 ：http://es6.ruanyifeng.com/

但是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

到此這篇關于react組件中的constructor和super知識點整理的文章就介紹到這了,更多相關react組件constructor和super內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論