[譯]React ES6 class constructor super()

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

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

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

不由會提出兩個問題：

1. 在constructor裏面調用super是不是必要的？

2. super與super(props)的區別？

解答一：

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

若是在你聲明的組件中存在constructor，則必需要加super，舉個栗子：

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

這段代碼完美無誤，你不須要爲之去調用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!

    }
}