[譯]React ES6 class constructor super()

terasum 發布于2019-08-20 13:50 / 1739人閱讀

摘要：會自行設置在組件的其他地方以供訪問。將傳入的作用是可以使你在內訪問它完善后如果你只是想在別處訪問它，是不必傳入的，因為會自動為你設置好

原博文地址: http://cheng.logdown.com/posts/2016/03/26/683329

當我們像下面這樣使用React的ES6 class語法創建一個組件的時候：

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

不禁會提出兩個問題：

在constructor里面調用super是否是必要的？

super與super(props)的區別？

解答一：

僅當存在constructor的時候必須調用super，如果沒有，則不用

如果在你聲明的組件中存在constructor，則必須要加super，舉個栗子：

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

這段代碼完美無誤，你不需要為之去調用super，然而，如果在你的代碼中存在consturctor，那你必須調用：

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

    }
}

之所以會報錯，是因為若不執行super，則this無法初始化。

你也許會抱著僥幸心理猜測：那我直接寫個空的constructor就得了唄~，然而，在ES6中的class語法中，只要你的class是子類，那必須得調用super，換句話說，有constructor就得有super（當然，子類也可以沒有constructor）

解答二

僅當你想在constructor內使用props才將props傳入super。React會自行props設置在組件的其他地方（以供訪問）。
將props傳入super的作用是可以使你在constructor內訪問它：

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

    }
}

完善后：

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

    }
}

如果你只是想在別處訪問它，是不必傳入props的，因為React會自動為你設置好：

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!

    }
}

GPU云服務器云服務器 es6中的class es6class constructor super

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81269.html

[譯]React ES6 class constructor super()

摘要：當我們在寫時候會用到中的語法比較常見的情況如下這里有兩個問題是否有必要在中調用函數調用和有何區別解答只有當你有一個時候調用才是必須的看代碼上述代碼完全符合規定所以你其實并沒有必要去為你創建的每個調用話分兩頭如果你的代碼中有你就必須調用出現上當我們在寫React時候會用到ES6中的class語法 ,比較常見的情況如下： class MyClass extends React.Comp...

justjavac 2019-08-22 10:53 評論0 收藏0
[譯]在 React.js 中使用 ES6+

摘要：如果是在中，我們也許只能這樣做但是，在中，我們不僅可以在對象字面量屬性的定義中使用表達式，還有使用使用字符串模板析構擴展運算符我們在編寫組件的過程中，經常遇到要從父組件要把自己的很多屬性多傳給子組件的情況。原文地址： http://babeljs.io/blog/2015/06/07/react-on-es6-plus/ showImg(http://7xiyp1.com1.z0.g...

Enlightenment 2019-08-21 10:40 評論0 收藏0
[譯] React 組件中綁定回調

摘要：好的方案在構造函數中仍然使用，現在我們只要繞過每次渲染都要生成新的函數的問題就可以了。我們可以通過只在構造函數中綁定回調的上下問來解決這個問題，因為構造函數只會調用一次，而不是每次渲染都調用。原文：Binding callbacks in React components 在組件中給事件綁定處理函數是很常見的，比如說每當用戶點擊一個button的時候使用console.log打印一些...

Lin_R 2019-08-22 10:33 評論0 收藏0
【譯】Handling Events

摘要：如果你使用實驗性屬性初始化語法，你能用這方法來正確綁定回調函數的綁定這語法在中默認支持。然而，如果這回調函數是作為一個傳遞到更下一級的組件中的時候，些組件可能會做一個額外的重新渲染。下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

sugarmo 2019-08-20 14:47 評論0 收藏0
[譯]JavaScript ES6 class指南

摘要：前言又稱通過一些新的關鍵字，使類成為了中一個新的一等公民。類聲明在中，有兩個聲明類的方式。在使用了新的關鍵字后在底層，所做的，也只是將這個方法添加為構造函數的一個屬性。在想要調用父類的構造函數時，你可以簡單地將關鍵字視作一個函數使用，如。前言 EcmaScript 2015 （又稱ES6）通過一些新的關鍵字，使類成為了JS中一個新的一等公民。但是目前為止，這些關于類的新關鍵字僅僅是建...

CoderDock 2019-08-21 10:37 評論0 收藏0