當我們在寫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 <div>Hello {this.props.world}</div>
}
}上述程式碼完全符合規定所以你其實並沒有必要去為你建立的每個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