快捷導(dǎo)航

React類組件中super()和super(props)的區(qū)別詳解

更新時(shí)間：2024年01月22日 11:32:27 作者：王歪歪

這篇文章給大家詳細(xì)介紹了React類組件中super()和super(props)有什么區(qū)別,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

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)文章！

您可能感興趣的文章:

React中super()和super(props)的區(qū)別小結(jié)

相關(guān)文章

React渲染機(jī)制及相關(guān)優(yōu)化方案
這篇文章主要介紹了react中的渲染機(jī)制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機(jī)制以及產(chǎn)生作用的機(jī)會(huì)，簡(jiǎn)單模擬實(shí)現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級(jí)的思路進(jìn)行項(xiàng)目?jī)?yōu)化的兩個(gè)hooks，感興趣的小伙伴跟著小編一起來(lái)看看吧
2023-07-07
react中useState使用:如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)
這篇文章主要介紹了react中useState的使用:如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
在React項(xiàng)目中使用iframe嵌入一個(gè)網(wǎng)站的步驟
本文介紹了如何在React項(xiàng)目中通過(guò)iframe嵌入百度網(wǎng)站的步驟,首先創(chuàng)建一個(gè)Baidu.js組件,并在該組件中設(shè)置iframe來(lái)加載百度,然后在App.js中引入并使用Baidu組件,還討論了因安全策略可能無(wú)法加載某些網(wǎng)站的問(wèn)題,需要的朋友可以參考下
2024-09-09
React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法詳解
我們知道在 angular 中數(shù)據(jù)時(shí)雙向綁定的；而在 react 中，數(shù)據(jù)是向一個(gè)方向傳遞：從擁有者到子節(jié)點(diǎn)。也就是我們說(shuō)的單向數(shù)據(jù)綁定。那如何實(shí)現(xiàn)雙向綁定呢？下面這篇文章主要給大家介紹了關(guān)于React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法，需要的朋友可以參考下。
2017-07-07
一篇文章教你用React實(shí)現(xiàn)菜譜系統(tǒng)
本篇文章主要介紹了React實(shí)現(xiàn)菜譜軟件的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2021-09-09
React hook 'useState' is calle
這篇文章主要為大家介紹了React hook 'useState' is called conditionally報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
react組件實(shí)例屬性props實(shí)例詳解
這篇文章主要介紹了react組件實(shí)例屬性props,本文結(jié)合實(shí)例代碼給大家簡(jiǎn)單介紹了props使用方法，代碼簡(jiǎn)單易懂，需要的朋友可以參考下
2023-01-01
使用react-virtualized實(shí)現(xiàn)圖片動(dòng)態(tài)高度長(zhǎng)列表的問(wèn)題
一般我們?cè)趯憆eact項(xiàng)目中,同時(shí)渲染很多dom節(jié)點(diǎn),會(huì)造成頁(yè)面卡頓, 空白的情況。為了解決這個(gè)問(wèn)題，今天小編給大家分享一篇教程關(guān)于react-virtualized實(shí)現(xiàn)圖片動(dòng)態(tài)高度長(zhǎng)列表的問(wèn)題，感興趣的朋友跟隨小編一起看看吧
2021-05-05
React useCallback詳細(xì)使用教程
useCallback是react中比較重要的一個(gè)hook，useCallback 用來(lái)返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用
2022-11-11
React啟動(dòng)時(shí)webpack版本沖突報(bào)錯(cuò)的解決辦法
在啟動(dòng)React應(yīng)用時(shí),遇到Webpack版本不匹配導(dǎo)致的運(yùn)行錯(cuò)誤,解決方法包括刪除全局及局部的webpack和webpack-cli,然后根據(jù)項(xiàng)目需求安裝特定版本的webpack,本文通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09