1、react中用class申明的類(lèi)一些小知識(shí)

如上圖：類(lèi)Child是通過(guò)class關(guān)鍵字申明，并且繼承于類(lèi)React。

A、Child的類(lèi)型是？ typeofChild === 'function' ， 其實(shí)就相當(dāng)于ES5用function申明的構(gòu)造函數(shù) function Child() { //申明構(gòu)造函數(shù) }

B、Child類(lèi)調(diào)用時(shí)候( new Child() )，會(huì)優(yōu)先執(zhí)行，并且自動(dòng)執(zhí)行Child的constructor函數(shù)。

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

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

打印如下：

3、Child類(lèi)中的this？ this指向Child的實(shí)例，相當(dāng)于 new Child() 那么它們完全相等嗎？ 不是的，react中的this是在new Child()基礎(chǔ)上進(jìn)行了包裹（下圖）。

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

結(jié)論：this是在new Child()基礎(chǔ)上進(jìn)行了包裹，包含了一些react內(nèi)部方法，

同時(shí)組件中使用Child類(lèi)( <div> <Child /> </div> )，可以看成 new Child（） + react包裹。（細(xì)節(jié)待追究。。。）

2、組件中的constructor是否有必要？ 如果沒(méi)有呢？？作用呢？？？

ES6的知識(shí)補(bǔ)充： http://es6.ruanyifeng.com/ 如下：

class ColorPoint extends Point {
}

// 等同于 
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}
// 可見(jiàn)沒(méi)有寫(xiě)constructor，在執(zhí)行過(guò)程中會(huì)自動(dòng)補(bǔ)上

由ES6的繼承規(guī)則得知，不管子類(lèi)寫(xiě)不寫(xiě)constructor，在new實(shí)例的過(guò)程都會(huì)給補(bǔ)上constructor。

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

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

A、先看有無(wú)constructor鉤子函數(shù)的 this.constructor

有constructor鉤子函數(shù)的 this.constructor

無(wú)constructor鉤子函數(shù)的 this.constructor

如果能看細(xì)節(jié)的話(huà)，會(huì)得知有constructor鉤子函數(shù)時(shí)候，Child類(lèi)會(huì)多一個(gè)constructor方法。

B、再看有無(wú)先看有無(wú)constructor鉤子函數(shù)的 this，也就是組件實(shí)例。

有constructor鉤子函數(shù)的 this實(shí)例。

無(wú)constructor鉤子函數(shù)的 this實(shí)例。

會(huì)得知有constructor鉤子函數(shù)時(shí)候，可以定義state，如果用戶(hù)不定義state的話(huà)，有無(wú)constructor鉤子函數(shù)時(shí)候沒(méi)有區(qū)別。

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

如果用戶(hù)不使用state的話(huà)，純用props接受參數(shù)，有沒(méi)有constructor鉤子函數(shù)都可以，可以不用constructor鉤子函數(shù)。

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

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

有的小伙伴每次寫(xiě)組件都會(huì)習(xí)慣性在constructor和super中寫(xiě)上props，那么這個(gè)是必要的嗎？？

如圖：

首先要明確很重要的一點(diǎn)就是：

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

此時(shí)組件才有自己的this，在組件的全局中都可以使用this關(guān)鍵字，

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

來(lái)源ES6 ：http://es6.ruanyifeng.com/

但是super中必須寫(xiě)參數(shù)props嗎？？ 答案是不一定，先看代碼：

有props：

無(wú)props：

可以得出結(jié)論：當(dāng)想在constructor中使用this.props的時(shí)候，super需要加入(props)，

此時(shí)用props也行，用this.props也行，他倆都是一個(gè)東西。（不過(guò)props可以是任意參數(shù)，this.props是固定寫(xiě)法）。

如圖：

如果在custructor生命周期不使用 this.props或者props時(shí)候，可以不傳入props。

下面是一個(gè)使用props的場(chǎng)景，此時(shí)別忘了componentWillReceiveProps 生命周期喲。

參考另一篇文章react的生命周期需要知道的

接上：如果constructor中不通過(guò)super來(lái)接收props，在其他生命周期，

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

結(jié)論：可以的，react在除了constructor之外的生命周期已經(jīng)傳入了this.props了，完全不受super(props)的影響。

所以super中的props是否接收，只能影響constructor生命周期能否使用this.props，其他的生命周期已默認(rèn)存在this.props

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

最新評(píng)論