Verwendung von componentDidUpdate() in React - Leitfaden für Entwickler

Jede Komponente in React hat einen Lebenszyklus, der überwacht und manipuliert werden kann. Diese Lebenszyklen können in drei Hauptphasen unterteilt werden, nämlich die Einhänge-, Aktualisierungs- und Aushängephase.

Mit dem Einbau oder der Geburt einer React-Komponente beginnt der Lebenszyklus der Komponente. Dies ist die Phase, in der wir den Zustand der Anwendung konfigurieren und die Benutzeroberfläche anzeigen. In dieser Phase werden unsere Props definiert. Zu den in der Montagephase verwendeten Methoden gehören constructor(), render(), componentDidMount() und getDerivedStateFromProps()

Nach der Geburt der Komponente in der Montagephase ist die Anwendung bereit für die Aktualisierungsphase. In dieser Phase werden Datenaktualisierungen empfangen und auf Benutzeraktionen reagiert. Zu den Aktualisierungsmethoden gehören shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() und componentDidUpdate(). Eine Komponente gilt als aktualisiert, wenn eine Änderung des Zustands oder der Requisiten eintritt.

Das Unmounting, auch bekannt als der Tod einer React-Komponente, ist die Phase, in der unsere Komponente aus dem DOM entfernt wird. Die Methode, die in dieser Phase verwendet wird, ist die Methode componentwillUnmount()

In diesem Artikel werden wir einen tiefen Blick auf componentDidUpdate() werfen, die eine der Methoden in der Aktualisierungsphase ist.

Was ist die Methode componentDidUpdate()

Die Methode componentDidUpdate() ist eine Aktualisierungsmethode, die nach der Methode componentDidMount() aufgerufen wird, und zwar unmittelbar nach einer Aktualisierung und nicht beim ersten Rendering.

Es ist anzumerken, dass es nicht 100%ig richtig ist, zu sagen, dass componentDidUpdate() nach componentDidMount() aufgerufen wird.

componentDidMount() wird in der Mounting-Phase aufgerufen, während componentDidUpdate() in der Updating-Phase aufgerufen wird. Das bedeutet, dass einige Methoden wie getSnapshotBeforeUpdate() zwischen componentDidMount() und componentDidUpdate() aufgerufen werden können. Die Aktualisierung kann immer dann erfolgen, wenn eine Zustandsmutation auftritt oder wenn es Änderungen an Requisiten gibt.

Immer wenn eine Mutation oder Änderung stattfindet, erhält die Methode componentDidUpdate() den vorherigen Zustand und die vorherigen Requisiten als Argumente. Indem wir den vorherigen Zustand und die vorherigen Requisiten als Argumente erhalten, können wir mit dieser Methode prüfen, ob eine Bedingung erfüllt wurde, und dann eine bestimmte Aktion durchführen, wenn die Prüfung den Wert "true" ergibt.

Die Syntax dieser Methode lautet:

componentDidUpdate(prevProps, prevState) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

In den meisten Fällen und in sehr seltenen Fällen wird die Methode componentDidUpdate() nach der Methode getSnapshotBeforeUpdate() aufgerufen, und wenn dies geschieht, wird ein drittes Argument -snapshot- an die Methode componentDidUpdate() übergeben:

componentDidUpdate(prevProps, prevState, snapshot) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

Wie man die Methode componentDidUpdate() "nicht" verwendet

Sie sollten innerhalb der Methode componentDidUpdate() keinen ungeprüften Zustand setzen. Ein Beispiel für einen ungeprüften Zustand ist unten dargestellt:

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  this.setState({ isUpdated: false });// VERY BAD: DO NOT DO THIS!!!
}

Der Grund dafür ist, dass wir bei Verwendung des obigen Codes in eine unendliche Rendering-Schleife geraten würden, da wir zuerst rendern und dann update aufrufen, das dann den Status festlegt und damit ein weiteres Rendering auslöst und so weiter.

Die Lösung hierfür ist, den Zustand in bedingte Anweisungen zu verpacken und dann den Zustand nur in bestimmten Bereichen zu ändern, wie wir im folgenden Beispiel sehen werden:

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  if (this.state.value === value){
  this.setState({ value: '' });// A possible fix!!!
  }
}

Beispiele für componentDidUpdate()

Im folgenden Beispiel haben wir einen Click-Handler, der immer dann ausgelöst wird, wenn in der Anwendung auf eine Schaltfläche geklickt wird, die dann den Zustand der angeklickten Schaltfläche in das Gegenteil des aktuellen Zustands ändert.

import React from 'react';
class Counter extends React.Component {
  state = {
    clicked: false,
  };

  buttonPress = () => {
    this.setState({
      clicked: !this.state.clicked,
    });
  };
  componentDidUpdate(prevProps, prevState) {
    prevState.clicked === this.state.clicked
      ? console.log('same state')
      : console.log('changed clicked state');
  }
  render() {
    return (
      <React.Fragment>
        <button
          style={{
            margin: 'auto',
            width: '50%',
            padding: 20,
            marginTop: '10%',
            border: 'solid 1px black',
            textAlign: 'center',
            fontSize: 18,
            color: 'black',
            cursor: 'pointer',
          }}
          onClick={this.buttonPress}
        >
          Click me
        </button>
      </React.Fragment>
    );
  }
}
export default Counter;

Aus dem obigen Beispiel geht hervor, dass die Methode componentDidUpdate() den vorherigen Zustand als Parameter erhält und dann prüft, ob der vorherige Zustand mit dem aktuellen Zustand von clicked übereinstimmt, und dann die entsprechende Meldung auf der Konsole protokolliert. Wenn der Zustand nicht aktualisiert worden wäre, würde die Meldung anders lauten.

UseCases der Methode componentDidUpdate()

Arbeiten mit dem DOM

Die Methode componentDidUpdate() kann unter anderem bei der Arbeit mit dem DOM verwendet werden. Da die Methode componentDidUpdate() nach der Mounting-Phase aufgerufen wird, bedeutet dies, dass wir auch auf DOM-Knoten zugreifen können. Wir können die Methode verwenden, um mit dem DOM zu arbeiten, wenn die Komponente aktualisiert wurde, wie wir im folgenden Beispiel sehen:

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 39 };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ counter: 39 + 4 });
    }, 2000);
  }
  componentDidUpdate(prevState, prevProps) {
    if (prevState !== this.state) {
      document.getElementById('mydiv').innerHTML =
        'The updated counter is ' + this.state.counter;
    }
  }
  render() {
    return (
      <div>
        <h1>My counter says: {this.state.counter}</h1>
        <div id="mydiv"></div>
      </div>
    );
  }
}
export default Counter;

Anhand des obigen Beispiels können wir die Montage- und Aktualisierungsphase unseres Komponenten-Lebenszyklus sehen. Wir haben den Zustand unserer Anwendung erstellt, dann die Methode componentDidMount() aufgerufen, unseren Zustand aktualisiert und dann einen Timeout gesetzt, damit wir den Lebenszyklus unserer Komponente verfolgen können. Die Methode componentDidUpdate() wurde nach der Methode componentDidMount() aufgerufen. In ihr haben wir unseren vorherigen Zustand und die vorherigen Requisiten als Argumente erhalten. Dann haben wir geprüft, ob der vorherige Zustand nicht gleich dem aktuellen Zustand ist. Da die Bedingung den Wert "true" ergab, griffen wir auf das DOM zu und setzten den inneren HTML-Code des Divs auf eine Nachricht unserer Wahl.

Abruf von Daten vom Server / API-Aufrufe

Ein weiterer Anwendungsfall für die Methode componentDidUpdate() ist die Durchführung von Serveraufrufen oder die Abfrage eines API-Endpunkts. Der Grund, warum diese Methode hierfür nützlich ist, liegt darin, dass sie nach dem ersten Abruf beim Laden der Seite weitere Daten abruft, ohne die Seite zu aktualisieren.

import React from 'react';
class Counter extends React.Component {
  // The first state lives here 
}

class ProjectsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { projects: [] };
  }
  // Emulates fetching data from server, data is returned after 300 ms timeout
  fetch = (person) => {
    setTimeout(() => {
      this.setState({
        projects:
          person === 'Isaac'
            ? ['Create a dashboard with React', 'Play Monopoly with friends']
            : [
                'Work on a project with Isaac',
                'Win a game of chess against a grandmaster',
              ],
      });
    }, 300);
  };
  componentDidUpdate(prevProps, prevState) {
    // check whether person has changed
    if (prevProps.person !== this.props.person) {
    // fetch if the person has changed
      this.fetch(this.props.person);
    }
  }
  render() {
    // render a list of projects
    return (
      
    );
  }
}
export default Counter;

Unten finden Sie einen Link zu einer Codesandbox, die den vollständigen Code enthält:

tps://codesandbox.io/s/blissful-breeze-w12rps

Im obigen Beispiel haben wir eine Abruffunktion erstellt, die die Verwendung von fetch oder axios emuliert. In der Methode componenDidUpdate() prüfen wir, ob sich der Name der Person geändert hat, indem wir die vorherigen Requisiten mit den aktuellen Requisiten vergleichen. Wenn sich der Name der Person geändert hat, fordern wir eine Liste von Projekten an und aktualisieren dann den Zustand der Komponente mit den Projekten

Es sei darauf hingewiesen, dass wir den internen Zustand der Komponente nicht aktualisieren, um eine unendliche Aktualisierungsschleife zu vermeiden, und deshalb überprüfen wir den Namen der Person in props, um dies zu vermeiden.

Schlussfolgerung

In diesem Artikel haben wir uns die componentDidUpdate-Methode, ihre Eigenheiten, Beispiele und Anwendungsfälle genau angeschaut. Wir haben uns auch mit schlechten Praktiken bei der Arbeit mit der componentDidUpdate-Methode und Lösungen dafür beschäftigt. Ich hoffe, dass dieser Artikel Antworten auf Ihre Fragen zur componentDidUpdate() -Methode gibt und Ihnen ein besseres Verständnis für ihre Funktionsweise vermittelt.