wake-up-neo.com

Was macht der Aufruf von super () in einem React-Konstruktor?

Lernreaktion aus den docs und stieß auf dieses Beispiel:

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  ...
}

Gemäß Mozilla können Sie mit this im Konstruktor super verwenden. Gibt es einen anderen Grund für die Verwendung einer eigenständigen super (ich weiß, dass super Sie auch auf die Methoden der übergeordneten Klasse zugreifen kann), aber gibt es bei React noch einen anderen Anwendungsfall, nur super() selbst aufzurufen?

javascriptreactjsconstructorecmascript-6
41
stackjlei

super() wird nur innerhalb einer reaktiven Komponente aufgerufen, wenn sie einen Konstruktor hat. Für den folgenden Code ist beispielsweise kein Super erforderlich:

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

Wenn wir jedoch einen Konstruktor haben, ist super() obligatorisch:

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

    }
}

Der Grund, warum this vor super() nicht zulässig ist, liegt darin, dass this nicht initialisiert ist, wenn super() nicht aufgerufen wird. Selbst wenn wir this nicht verwenden, benötigen wir eine super() innerhalb eines Konstruktors, da ES6 class constructors MUST call super if they are subclasses. Sie müssen also super() aufrufen, solange Sie einen Konstruktor haben. (Aber eine Unterklasse muss keinen Konstruktor haben.).

Wir rufen super(props) im Konstruktor auf, wenn wir this.props verwenden müssen, zum Beispiel:

class App extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

Ich hoffe, ich könnte es klarstellen.

58
Shubham Khatri

super() ruft die constructor seiner parent-Klasse auf. Dies ist erforderlich, wenn Sie auf einige Variablen der übergeordneten Klasse zugreifen müssen. 

In React, wenn Sie super mit Requisiten aufrufen. React macht props in der gesamten Komponente durch this.props verfügbar. Siehe Beispiel 2 unten

ohne super()

class A {
  constructor() {
    this.a = 'hello'
  }
}

class B extends A {
  constructor(){
    console.log(this.a) //throws an error
  }
}

console.log(new B())

mit super()

class A {
  constructor(props) {
    this.props = props
  }
}

class B extends A {
  constructor(props) {
    super(props)
    console.log(this.props)
  }
}

console.log(new B({title: 'hello world'}))

Hoffe das hilft!

55
Pranesh Ravi

Wenn Sie den Konstruktor für einen React.Component subclass implementieren, sollten Sie super(props) vor jeder anderen Anweisung aufrufen. Andernfalls ist this.props im Konstruktor undefined, was zu Fehlern führen kann.

0
sg28