快捷導(dǎo)航

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

更新時間：2024年03月11日 09:41:40 作者：前端小超人rui

本文主要介紹了React中super()和super(props)的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. ES6類

在ES6中，通過extends關(guān)鍵字實現(xiàn)類的繼承，方式如下：

class sup{
    constructor(name){
        this.name=name;
    }
    printName(){
        console.log(this.name)
    }
}
class sub extends sup{
    constructor(name,age){
        super(name) //super 代表的是父類的構(gòu)造函數(shù)
        this.age=age;
    }
    printAge(){
        console.log(this.age)
    }
}
let rui=new sub('rui',21);
rui.printAge() //21
rui.printName() //rui

在上面的例子在子中，可以看到通過super關(guān)鍵字實現(xiàn)調(diào)用父類，super代替的是父類的構(gòu)建函數(shù)，使用super(name)相當于調(diào)sup.prototype.constructor.call(this.name)

如果在子類中不使用super關(guān)鍵字，則會引發(fā)報錯
報錯的原因是子類沒有自己的this對象,它只能繼承父類的this對象，然后對其進行加工而super()就是將父類中的this對象繼承給子類的，沒有super()子類就得不到this對象

如果先調(diào)用this ，再初始化super(),同樣是禁止的行為
所以在子類的constructor 中，必須先用super 才能引用this

2. 類組件

在React中，類組件是基于es6的規(guī)范實現(xiàn)的，繼承React.Component,因此如果用到constructor就必須寫super()才初始化this

這時候，在調(diào)用super()的時候，我們一般都需要傳入props作為參數(shù)，如果傳不進去，React內(nèi)部也會將其定義在組件實例中

// React 內(nèi)部
const instance = new YourComponent(props);
instance.props = props;

所以無論有沒有constructor，在render中this.props都是可以使用的，這是React自動附帶的，是可以不寫的

class HelloMessage extends React.Component{
    render(){
        return <div>hello {this.props.name}</div>
    }
}

但是也不建議使用super()代替super(props)因為在React會在類組件構(gòu)造函數(shù)生成實例后再給this.props附值，所以不傳遞props在super的情況下，調(diào)用this.props為undefined,情況如下：

class Button extends React.Component{
    constructor(props){
        super() //沒傳入props
        console.log(props) //{}
        console.log(this.props) //undefined
    }
}

而傳入props的則都能正常訪問，確保了this.props在構(gòu)造函數(shù)執(zhí)行完畢之前已經(jīng)被賦值，更符合邏輯

class Button extends React.Component{
    constructor(props){
        super(props) /
        console.log(props) //{}
        console.log(this.props) //{}
    }
}

3. 總結(jié)

在React 中，類組件基于ES6，所以在constructor中必須使用super在調(diào)用super過程，無論是否傳入props，React內(nèi)部都會將props賦值給組件實例props屬性中，如果調(diào)用了super(),那么this.props在super和構(gòu)造函數(shù)結(jié)束之間仍然是undefined

到此這篇關(guān)于React中super()和super(props)的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)React super()和super(props)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: