[译]React ES6 class constructor super()

当我们在写React时候会用到ES6中的class语法,比较常见的情况如下：

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

这里有两个问题：

是否有必要在constructor中调用super()函数？
调用super()和super(props) 有何区别 ?

502

解答 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() 话分两头如果你的代码中有constrctor你就必须调用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()

[译]React ES6 class constructor super()

猜你在找的React相关文章