為什麼react的元件要super props

2022-03-10 07:48:03 字數 1596 閱讀 7161

對這個問題糾結了好幾天,一直沒時間深入研究。在segmentfault看到有人提出了同樣的問題,下面這篇sf給出了解釋。為什麼react的元件要super(props)

解釋一: 

呼叫super的原因:在es6中,在子類的constructor中必須先呼叫super才能引用this

super(props)的目的:在constructor中可以使用this.props

最後,可以看下react文件,裡面有一段

class components should always call the base constructor with props.

解釋二: 

假設在es5要實現繼承,首先定義乙個父類:

//父類

function sup(name)

//定義父類原型上的方法

sup.prototype.printname = function ()

現在再定義他sup的子類,繼承sup的屬性和方法:

function sub(name,age)    

sub.prototype = new sup //把子類sub的原型物件指向父類的例項化物件,這樣即可以繼承父類sup原型物件上的屬性和方法

sub.prototype.constructor = sub //這時會有個問題子類的constructor屬性會指向sup,手動把constructor屬性指向子類sub

//這時就可以在父類的基礎上新增屬性和方法了

sub.prototype.printage = function ()

這時呼叫父類生成乙個例項化物件:

let jack = new sub('jack',20)

jack.printname() //輸出 : jack

jack.printage() //輸出 : 20

這就是es5中實現繼承的方法。而在es6中實現繼承:

class sup 

printname()

}class sub extends sup

printage()

}let jack = new sub('jack',20)

jack.printname() //輸出 : jack

jack.printage() //輸出 : 20

對比es5和es6可以發現在es5實現繼承,在es5中實現繼承:

首先得先呼叫函式的call方法把父類的屬性給繼承過來

通過new關鍵字繼承父類原型的物件上的方法和屬性

最後再通過手動指定constructor屬性指向子類物件

而在es6中實現繼承,直接呼叫super(name),就可以直接繼承父類的屬性和方法,所以super作用就相當於上述的實現繼承的步驟,不過es6提供了super語法糖,簡單化了繼承的實現

為什麼要元件化

工程任何一點改動都會造成整個工程的重新編譯.記憶最深的就是早期在沒有進行元件化的時候,龐大的工程動輒需要十幾分鐘的編譯時間,一杯茶的時間就出來了,很多時候,不得不眼巴巴的等著,儘管現在可以使用facebook出品的buck以及來自阿里的feeline來加速編譯過程,單仍然不夠.整個工程中充斥的大量重...

Vue元件為什麼要export default

vue的模組機制 vue是通過webpack實現模組化,因此可以使用import來引入模組,例如 此外,你還可以在 bulid webpack.base.conf.js 檔案中修改相關配置 意思是,你的模組可以省略 js vue json 字尾,weebpack 會在之後自動新增上 可以用 符號代替...

為什麼react列表要加key

遍歷物件的每乙個屬性深度對比是非常浪費效能的 react 使用列表的key來進行對比,如果不指定,就預設為 index 下標 那麼,為什麼 不指定 key 用 index 下標 是不好的呢?假設現在有這樣一段 const users users.map u,i 它會渲染出這個 dom 樹 bob s...