React ES6 类组件中的构造函数

React ES6 class constructor super() 】

学 Reactjs101 时发现自己能看懂参看文章 React ES6 class constructor super() 。所以就翻译过来了

当你用 ES6 语法 class 写 React 像这样：

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

或许会有两个疑问：

1. 必须在 constructor 中加入 super() 吗？
2. super() 和 super(props) 之间有事吗不同？

Answer 1

有 constructor 就需要 super()

如果你有个构造函数 constructor 就 必须要有 super() 。看看下面的例子：

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

上面的代码是完全有效的。你不需要在你所有创建的组件中加入super() 。然而，如果你代码中有构造函数，那你必须调用 super() ：

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

    }
}

因为在没有调用 super()之前this 未初始化，这就是为什么 this 不能在 super()之前。

你或许想你能创建一个不调用 super() 的空构造函数：

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

ES6 class constructors 必须调用 super 如果是子类。因此，你必须调用 super() 只要你有一个构造函数。（但子类不需要有构造函数）。

Answer 2

只有你想把this.props写在构造函数中才需要调用super(props)：

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!
    }
}