[譯]React ES6 class constructor super()

justjavac 發(fā)布于2019-08-22 10:53 / 983人閱讀

摘要：當(dāng)我們在寫時(shí)候會用到中的語法比較常見的情況如下這里有兩個(gè)問題是否有必要在中調(diào)用函數(shù)調(diào)用和有何區(qū)別解答只有當(dāng)你有一個(gè)時(shí)候調(diào)用才是必須的看代碼上述代碼完全符合規(guī)定所以你其實(shí)并沒有必要去為你創(chuàng)建的每個(gè)調(diào)用話分兩頭如果你的代碼中有你就必須調(diào)用出現(xiàn)上

當(dāng)我們在寫React時(shí)候會用到ES6中的class語法 ,比較常見的情況如下：

class MyClass extends React.Component{
    constructor(){
        super()
    }
}

這里有兩個(gè)問題：

是否有必要在constructor中調(diào)用super()函數(shù)？

調(diào)用super()和super(props) 有何區(qū)別 ?

解答 Q1：

Always call super() if you have a constructor and don"t worry about it if you don"t have a constructor

只有當(dāng)你有一個(gè)constructor時(shí)候調(diào)用super()才是必須的看代碼：

class MyClass extends React.component{
    render(){
        return Hello {this.props.world}
    }
}

上述代碼完全符合規(guī)定所以你其實(shí)并沒有必要去為你創(chuàng)建的每個(gè)React Component 調(diào)用super() 話分兩頭如果你的代碼中有constructor你就必須調(diào)用super()

class MyClass extends React.component {
    constructor(){
        console.log(this) //Error: "this" is not allowed before super()
    }
}

出現(xiàn)上述錯(cuò)誤的原因是 super() 未被調(diào)用之前 this 還未被初始化 (uninitialized) 了解更多
或許聰敏的你會想著使用一個(gè)空的constructor從而擺脫super()

class MyClass extends React.component {
    constructor(){} // Error: missing super() call in constructor
}

ES6的 class 的constructors如果屬于子類就必須調(diào)用super()方法所以一旦你的代碼有
constructor 你就必須調(diào)用用 super()

解答Q 2：

Call super(props) only if you want to access this.props inside the constructor. React automatically set it for you if you want to access it anywhere else.

假使你想獲取到constructor中的this.props 你就必須調(diào)用super(props) 然后React就會自動為你自動為你配置好它以便你可以在隨便什么地方調(diào)用它

看一下使用super() 和 super(props) 的不同：

class MyClass extends React.component{
    constructor(props){
        super();
        console.log(this.props); // this.props is undefined

    }
}

當(dāng)使用super(props)時(shí) 你可以從constructor中獲取到this.props

class MyClass extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props
    }
}

當(dāng)然還有一點(diǎn) 當(dāng)你想在其他地方使用它時(shí) 也沒有必要將props傳遞到constructor中 React會自動為你設(shè)置好它了解更多

class MyClass extends React.component{
    render(){
        // There is no need to call `super(props)` or even having a constructor 
        // this.props is automatically set for you by React 
        // not just in render but another where else other than the constructor
        console.log(this.props);  // it works!
    }
}

我的理解是總之需要綁定 this. 方法或是需要在 constructor 使用操作 props 定義 state，就需要 constructor ，否則例如在其他方法中（如 render()）使用 this.props 則沒必要要使用 constructor

原文鏈接： React ES6 class constructor super()

云服務(wù)器 GPU云服務(wù)器 es6中的class es6class constructor super

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91387.html

發(fā)表評論

登陸后可評論

0條評論

justjavac

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow應(yīng)用案例

閱讀 3556·2023-04-25 21:43
問:在指定的JSON數(shù)據(jù)中（最外層是數(shù)組）根據(jù)指定條件拿到匹配到的結(jié)果

閱讀 3125·2019-08-29 17:04
【靜態(tài)頁面架構(gòu)】CSS之顏色與單位

閱讀 828·2019-08-29 16:32
前端每日實(shí)戰(zhàn)：12# 視頻演示如何用純 CSS 創(chuàng)作一種文字?jǐn)嚅_的交互特效

閱讀 1567·2019-08-29 15:16
前端系列——論前端工程師增加知名度的重要性

閱讀 2174·2019-08-29 14:09
CSS3 新特性

閱讀 2772·2019-08-29 13:07
JavaScript事件循環(huán)（Event Loop）

閱讀 1656·2019-08-26 13:32
CSS層疊機(jī)制

閱讀 1346·2019-08-26 12:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

[譯]React ES6 class constructor super()

相關(guān)文章