Wann wird die React-Methode "componentDidUpdate" verwendet?

Ich habe Dutzende von ReactDateien geschrieben, benutze nie die componentDidUpdateMethode.

Gibt es ein typisches Beispiel dafür, wann diese Methode angewendet werden muss?

Ich möchte ein Beispiel aus der Praxis, keine einfache Demo.

Danke für die Antwort!

Ein einfaches Beispiel wäre eine App, die Eingabedaten vom Benutzer sammelt und diese Daten dann mit Ajax in eine Datenbank hochlädt. Hier ist ein vereinfachtes Beispiel (nicht ausgeführt - möglicherweise Syntaxfehler):

export default class Task extends React.Component {
  
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: "",
      age: "",
      country: ""
    };
  }

  componentDidUpdate() {
    this._commitAutoSave();
  }

  _changeName = (e) => {
    this.setState({name: e.target.value});
  }

  _changeAge = (e) => {
    this.setState({age: e.target.value});
  }

  _changeCountry = (e) => {
    this.setState({country: e.target.value});
  }

  _commitAutoSave = () => {
    Ajax.postJSON('/someAPI/json/autosave', {
      name: this.state.name,
      age: this.state.age,
      country: this.state.country
    });
  }

  render() {
    let {name, age, country} = this.state;
    return (
      <form>
        <input type="text" value={name} onChange={this._changeName} />
        <input type="text" value={age} onChange={this._changeAge} />
        <input type="text" value={country} onChange={this._changeCountry} />
      </form>
    );
  }
}

Wenn sich also die Komponente stateändert, werden die Daten automatisch gespeichert. Es gibt auch andere Möglichkeiten, dies zu implementieren. Dies componentDidUpdateist besonders nützlich, wenn ein Vorgang ausgeführt werden muss, nachdem das DOM aktualisiert und die Aktualisierungswarteschlange geleert wurde. Es ist wahrscheinlich am nützlichsten auf komplexe rendersund stateoder DOM ändert oder wenn Sie etwas brauchen , das zu sein , absolut ausgeführt letzte Sache werden.

Das obige Beispiel ist zwar recht einfach, beweist aber wahrscheinlich den Punkt. Eine Verbesserung könnte darin bestehen, die Häufigkeit zu begrenzen, mit der die automatische Speicherung ausgeführt werden kann (z. B. maximal alle 10 Sekunden), da sie derzeit bei jedem Tastendruck ausgeführt wird.

Ich habe auch eine Demo zu dieser Geige gemacht, um sie zu demonstrieren.

Weitere Informationen finden Sie in den offiziellen Dokumenten :

componentDidUpdate()wird sofort nach der Aktualisierung aufgerufen. Diese Methode wird beim ersten Rendern nicht aufgerufen.

Nutzen Sie dies als Gelegenheit, um das DOM zu bearbeiten, wenn die Komponente aktualisiert wurde. Dies ist auch ein guter Ort, um Netzwerkanforderungen auszuführen, solange Sie die aktuellen Requisiten mit früheren Requisiten vergleichen (z. B. ist eine Netzwerkanforderung möglicherweise nicht erforderlich, wenn sich die Requisiten nicht geändert haben).

Manchmal können Sie einen Statuswert von Requisiten im Konstruktor oder in componentDidMount hinzufügen. Möglicherweise müssen Sie setState aufrufen, wenn sich die Requisiten geändert haben, die Komponente jedoch bereits bereitgestellt wurde, sodass componentDidMount nicht ausgeführt wird und der Konstruktor auch nicht ausgeführt wird. In diesem speziellen Fall können Sie componentDidUpdate verwenden, da sich die Requisiten geändert haben. Sie können setState in componentDidUpdate mit neuen Requisiten aufrufen.

Ich habe componentDidUpdate()in Highchart verwendet.

Hier ist ein einfaches Beispiel für diese Komponente.

import React, { PropTypes, Component } from 'react';
window.Highcharts = require('highcharts');

export default class Chartline extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chart: ''
    };
  }

  public componentDidUpdate() {
    // console.log(this.props.candidate, 'this.props.candidate')
    if (this.props.category) {
      const category = this.props.category ? this.props.category : {};
      console.log('category', category);
      window.Highcharts.chart('jobcontainer_' + category._id, {
        title: {
          text: ''
        },
        plotOptions: {
          series: {
            cursor: 'pointer'
          }
        },
        chart: {
          defaultSeriesType: 'spline'
        },
        xAxis: {
          // categories: candidate.dateArr,
          categories: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5', 'Day6', 'Day7'],
          showEmpty: true
        },
        labels: {
          style: {
            color: 'white',
            fontSize: '25px',
            fontFamily: 'SF UI Text'
          }
        },
        series: [
          {
            name: 'Low',
            color: '#9B260A',
            data: category.lowcount
          },
          {
            name: 'High',
            color: '#0E5AAB',
            data: category.highcount
          },
          {
            name: 'Average',
            color: '#12B499',
            data: category.averagecount
          }
        ]
      });
    }
  }
  public render() {
    const category = this.props.category ? this.props.category : {};
    console.log('render category', category);
    return <div id={'jobcontainer_' + category._id} style={{ maxWidth: '400px', height: '180px' }} />;
  }
}

componentDidUpdate(prevProps){ 

    if (this.state.authToken==null&&prevProps.authToken==null) {
      AccountKit.getCurrentAccessToken()
      .then(token => {
        if (token) {
          AccountKit.getCurrentAccount().then(account => {
            this.setState({
              authToken: token,
              loggedAccount: account
            });
          });
        } else {
          console.log("No user account logged");
        }
      })
      .catch(e => console.log("Failed to get current access token", e));

    }
}

Diese Lebenszyklusmethode wird aufgerufen, sobald die Aktualisierung erfolgt. Der häufigste Anwendungsfall für die componentDidUpdate () -Methode ist das Aktualisieren des DOM als Reaktion auf Prop- oder Statusänderungen.

Sie können setState () in diesem Lebenszyklus aufrufen. Beachten Sie jedoch, dass Sie es in einen Zustand einschließen müssen, um nach Status- oder Requisitenänderungen gegenüber dem vorherigen Status zu suchen. Eine falsche Verwendung von setState () kann zu einer Endlosschleife führen. Schauen Sie sich das folgende Beispiel an, das ein typisches Anwendungsbeispiel für diese Lebenszyklusmethode zeigt.

componentDidUpdate(prevProps) {
 //Typical usage, don't forget to compare the props
 if (this.props.userName !== prevProps.userName) {
   this.fetchData(this.props.userName);
 }
}

Beachten Sie im obigen Beispiel, dass wir die aktuellen Requisiten mit den vorherigen Requisiten vergleichen. Hiermit wird überprüft, ob sich die Requisiten gegenüber dem aktuellen Stand geändert haben. In diesem Fall muss der API-Aufruf nicht ausgeführt werden, wenn sich die Requisiten nicht geändert haben.

Weitere Informationen finden Sie in den offiziellen Dokumenten:

Wenn sich etwas im Status geändert hat und Sie einen Nebeneffekt aufrufen müssen (z. B. eine Aufforderung zum Abrufen, Setzen, Veröffentlichen, Löschen). Sie müssen also anrufen, componentDidUpdate()da componentDidMount()bereits angerufen wird.

Nachdem Sie den Nebeneffekt in componentDidUpdate () aufgerufen haben, können Sie den Status basierend auf den Antwortdaten in der Datei auf einen neuen Wert setzen then((response) => this.setState({newValue: "here"})). Stellen Sie sicher, dass Sie die Endlosschleife überprüfen prevPropsoder prevStatevermeiden müssen, da beim Setzen des Status auf einen neuen Wert die KomponenteDidUpdate () erneut aufgerufen wird.

Es gibt zwei Stellen, an denen ein Nebeneffekt für bewährte Verfahren aufgerufen werden kann: componentDidMount () und componentDidUpdate ()