React constructor()-Methode

React 组件生命周期React-Komponenten-Lebenszyklus

Das Format der constructor()-Methode ist wie folgt:

constructor(props)

Bevor eine React-Komponente gemountet wird, wird ihr constructor() aufgerufen.

Wenn Sie einen Konstruktor für eine Unterklasse von React.Component implementieren, sollten Sie super(props) vor allen anderen Anweisungen aufrufen.

Im folgenden Beispiel ruft React den Konstruktor jedes Mal auf, wenn eine Komponente erstellt wird:

Beispiel

class Header extends React.Component { constructor(props) { super(props); this.state = {favoritewebsite: "example"}; } render() { return ( <h1>Meine Lieblingswebsites{this.state.favoritewebsite}</h1> ); } }

Selbst ausprobieren »

In React wird der Konstruktor nur in den folgenden zwei Fällen verwendet:

  • Initialisieren des internen Zustands durch Zuweisen eines Objekts zu this.state.
  • Binden einer Instanz an Event-Handler-Funktionen.

Wenn Sie keinen Zustand initialisieren oder keine Methoden binden, müssen Sie keinen Konstruktor für die React-Komponente implementieren.

Rufen Sie setState() nicht in der Funktion constructor() auf. Wenn Ihre Komponente einen internen Zustand verwenden muss, weisen Sie den Anfangszustand im Konstruktor direkt this.state zu:

constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Sie können this.state nur im Konstruktor direkt zuweisen. Um this.state in anderen Methoden zuzuweisen, sollten Sie stattdessen this.setState() verwenden.

React 组件生命周期React-Komponenten-Lebenszyklus

Andere Erweiterungen