[譯]React ES6 class constructor super()

justjavac 發布于2019-08-22 10:53 / 961人閱讀

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

當我們在寫React時候會用到ES6中的class語法 ,比較常見的情況如下：

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

這里有兩個問題：

是否有必要在constructor中調用super()函數？

調用super()和super(props) 有何區別 ?

解答 Q1：

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

只有當你有一個constructor時候調用super()才是必須的看代碼：

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

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

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

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

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

ES6的 class 的constructors如果屬于子類就必須調用super()方法所以一旦你的代碼有
constructor 你就必須調用用 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 你就必須調用super(props) 然后React就會自動為你自動為你配置好它以便你可以在隨便什么地方調用它

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

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

    }
}

當使用super(props)時你可以從constructor中獲取到this.props

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

當然還有一點當你想在其他地方使用它時也沒有必要將props傳遞到constructor中 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!
    }
}

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

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

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

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

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

[譯]React ES6 class constructor super()

摘要：會自行設置在組件的其他地方以供訪問。將傳入的作用是可以使你在內訪問它完善后如果你只是想在別處訪問它，是不必傳入的，因為會自動為你設置好原博文地址: http://cheng.logdown.com/posts/2016/03/26/683329 當我們像下面這樣使用React的ES6 class語法創建一個組件的時候： class MyClass extends React.comp...

terasum 2019-08-20 13:50 評論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