React-Komponenten-Lebenszyklus

In diesem Kapitel werden wir den Lebenszyklus von React-Komponenten besprechen.

Der Lebenszyklus einer Komponente kann in drei Zustände unterteilt werden:

  • Mounting: Wurde in das echte DOM eingefügt
  • Updating: Wird erneut gerendert
  • Unmounting: Wurde aus dem echten DOM entfernt

Mounting

Wenn eine Komponenteninstanz erstellt und in das DOM eingefügt wird, ist die Aufrufreihenfolge der Lebenszyklusmethoden wie folgt:

  • constructor(): Wird aufgerufen, bevor eine React-Komponente gemountet wird; ihr Konstruktor wird aufgerufen.
  • getDerivedStateFromProps(): Wird aufgerufen, bevor die render-Methode aufgerufen wird, und wird während des initialen Mountens und bei nachfolgenden Aktualisierungen aufgerufen.
  • render(): Die render()-Methode ist die einzige erforderliche Methode in einer Klassenkomponente.
  • componentDidMount(): Wird unmittelbar aufgerufen, nachdem die Komponente gemountet wurde (in den DOM-Baum eingefügt).

Die Methode render() ist die einzige erforderliche Methode in einer Klassenkomponente; andere Methoden können nach Bedarf implementiert werden.

Eine ausführliche Dokumentation zu diesen Methoden finden Sie inder offiziellen Dokumentation。

Aktualisierung

Immer wenn sich State oder Props einer Komponente ändern, wird die Komponente aktualisiert.

Ein Update wird ausgelöst, wenn sich die Props oder der State einer Komponente ändern. Die Aufrufreihenfolge der Lifecycle-Methoden bei Komponenten-Updates ist wie folgt:

  • getDerivedStateFromProps(): Wird aufgerufen, bevor die render-Methode ausgeführt wird, und wird sowohl beim initialen Mounten als auch bei nachfolgenden Updates aufgerufen. Basierend auf dem Rückgabewert von shouldComponentUpdate() bestimmt sie, ob die Ausgabe der React-Komponente durch die aktuellen Änderungen an State oder Props beeinflusst wird.
  • shouldComponentUpdate(): Wenn sich Props oder State ändern, wird shouldComponentUpdate() aufgerufen, bevor das Rendering ausgeführt wird.
  • render(): Die render()-Methode ist die einzige erforderliche Methode in einer Klassenkomponente.
  • getSnapshotBeforeUpdate(): Wird aufgerufen, bevor die zuletzt gerenderte Ausgabe in den DOM-Knoten übernommen wird.
  • componentDidUpdate(): Wird unmittelbar nach dem Update aufgerufen.

Die Methode render() ist die einzige erforderliche Methode in einer Klassenkomponente; andere Methoden können nach Bedarf implementiert werden.

Eine ausführliche Dokumentation zu diesen Methoden finden Sie inder offiziellen Dokumentation。

Aushängen

Wenn eine Komponente aus dem DOM entfernt wird, wird die folgende Methode aufgerufen:

Eine ausführliche Dokumentation zu diesen Methoden finden Sie inder offiziellen Dokumentation。

Beispiel

Das Folgende ist ein Beispiel für die aktuelle Uhrzeit, die jede Sekunde aktualisiert wird:

Beispiel

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hallo, Example!</h1> <h2>Die aktuelle Uhrzeit ist:{this.state.date.toLocaleTimeString()}.</h2> </div> ); } } const root = ReactDOM.createRoot(document.body); root.render( <Clock /> );

Ausprobieren »

Im folgenden Beispiel wird nach dem Laden der Hello-Komponente über die Methode componentDidMount ein Timer eingerichtet, um die Deckkraft der Komponente alle 100 Millisekunden zurückzusetzen und neu zu rendern:

React-Beispiel

class Hello extends React.Component { constructor(props) { super(props); this.state = {opacity: 1.0}; } componentDidMount() { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); } render () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Hello name="world"/> );

Ausprobieren »

Das folgende Beispiel initialisiertstate ， setNewnumberzum Aktualisieren vonstate. Alle Lebenszyklusmethoden befinden sich in derContent-Komponente.

React-Beispiel

class Button extends React.Component { constructor(props) { super(props); this.state = { data: 0 }; this.setNewNumber = this.setNewNumber.bind(this); } setNewNumber() { this.setState({ data: this.state.data + 1 }); } render() { return ( <div> <button onClick={this.setNewNumber}>INCREMENT</button> <Content myNumber={this.state.data} /> </div> ); } } class Content extends React.Component { componentDidMount() { console.log("Komponente WURDE EINGEHÄNGT!"); } shouldComponentUpdate(newProps, newState) { return true; } componentDidUpdate(prevProps, prevState) { console.log("Komponente WURDE AKTUALISIERT!"); } componentWillUnmount() { console.log("Komponente WIRD AUSGEHÄNGT!"); } render() { return ( <div> <h3>{this.props.myNumber}</h3> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <Button /> </div> );

Ausprobieren »
Andere Erweiterungen