React類組件中super()和super(props)的區(qū)別詳解
ES6類的繼承
在ES6中，通過(guò)extends關(guān)鍵字實(shí)現(xiàn)類的繼承，如下：
class sup{
constructor(name){
this.name = name;
}
printName(){
console.log(this.name);
}
}
class sub extends sup{
constructor(name,age){
super(name);
this.age = age;
}
printAge(){
console.log(this.age);
}
}
let tom = new sub("tom",20);
tom.printName(); //tom
tom.printAge(); //20
通過(guò)super關(guān)鍵字實(shí)現(xiàn)調(diào)用父類，super代替父類的構(gòu)建函數(shù)，相當(dāng)于調(diào)用sup.prototype.constructor.call(this,name),如果子類不適用super關(guān)鍵字會(huì)報(bào)錯(cuò)，報(bào)錯(cuò)的原因是子類沒(méi)有自己的this對(duì)象，他只是繼承父類的this對(duì)象，然后對(duì)其加工，也不能先用this，再調(diào)用super
類組件的繼承
類組件繼承React.Component，因此如果用到constructor就必須寫super（），才能初始化this，在調(diào)用super的時(shí)候一般要傳入props作為參數(shù)，如果不傳進(jìn)去，react內(nèi)部也會(huì)將其定義在組件實(shí)例中
// react內(nèi)部 const instance = new ExampleComponent(props); instance.props = props;
所以無(wú)論有沒(méi)有constructor，在render中的this.props都是可以使用的，在react中，使用super（），不傳入props，調(diào)用this.props為undefined，如下：
class Button extends React.Component{
constructor(props){
super();
console.log(this.props); //undefined
}
}
如果傳入props：
class Button extends React.Component{
constructor(props){
super(props);
console.log(this.props); //{}
}
}
總結(jié)區(qū)別
不管是super（）還是super（props），React內(nèi)部都會(huì)將props賦值給組件實(shí)例props屬性中，如果只調(diào)用super()，那么在構(gòu)造函數(shù)結(jié)束之前，使用this.props還是undefined
以上就是React類組件中super()和super(props)的區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于React super()和super(props)區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
使用reactjs優(yōu)化了進(jìn)度條頁(yè)面性能提高70%
這篇文章主要介紹了使用reactjs優(yōu)化了進(jìn)度條后頁(yè)面性能提高了70%的操作技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
通過(guò)示例講解Remix?設(shè)計(jì)哲學(xué)理念
這篇文章主要為大家通過(guò)示例講解了Remix?設(shè)計(jì)哲學(xué)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼
本篇文章主要介紹了使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了淺談React的最大亮點(diǎn)之虛擬DOM,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
解讀react的onClick自動(dòng)觸發(fā)等相關(guān)問(wèn)題
這篇文章主要介紹了解讀react的onClick自動(dòng)觸發(fā)等相關(guān)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Reactjs?+?Nodejs?+?Mongodb?實(shí)現(xiàn)文件上傳功能實(shí)例詳解
今天是使用?Reactjs?+?Nodejs?+?Mongodb?實(shí)現(xiàn)文件上傳功能，前端我們使用?Reactjs?+?Axios?來(lái)搭建前端上傳文件應(yīng)用，后端我們使用?Node.js?+?Express?+?Multer?+?Mongodb?來(lái)搭建后端上傳文件處理應(yīng)用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-06-06
Webpack3+React16代碼分割的實(shí)現(xiàn)
這篇文章主要介紹了Webpack3+React16代碼分割的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03