[译]React ES6 class constructor super()

2024年1月14日 144次阅读 来源: jshao

原博文地点: 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!

    }
}
    原文作者：jshao
    原文地址: https://segmentfault.com/a/1190000008165717
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞