Ich habe Dutzende von React
Dateien geschrieben, benutze nie die componentDidUpdate
Methode.
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!
Antworten:
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):
Wenn sich also die Komponente
state
ändert, werden die Daten automatisch gespeichert. Es gibt auch andere Möglichkeiten, dies zu implementieren. DiescomponentDidUpdate
ist 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 komplexerenders
undstate
oder 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 :
quelle
this.setState({...}, callback)
,callback
gleich_commitAutoSave
, was denkst du? Also, ich denke, dieser Fall kann einecomponentDidUpdate
Methode verwenden, muss es aber nicht, oder? GeigecomponentDidUpdate
ist also, mehrere setStates zu lösen! Irgendwelche anderen Ideen?setState
CDU in bedingte Logik eingeschlossen werden .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.
quelle
Ich habe
componentDidUpdate()
in Highchart verwendet.Hier ist ein einfaches Beispiel für diese Komponente.
quelle
quelle
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.
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:
quelle
this.fetchData is not a function
?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()
dacomponentDidMount()
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üfenprevProps
oderprevState
vermeiden 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 ()
quelle