Aus dem offiziellen Lernprogramm: componentWillUnmount () wird unmittelbar vor dem Unmounten und dem Löschen einer Komponente aufgerufen. Führen Sie bei dieser Methode alle erforderlichen Bereinigungen durch, z. B. das Deaktivieren von Zeitgebern, das Abbrechen von Netzwerkanforderungen oder das Bereinigen von DOM-Elementen, die in componentDidMount
erstellt wurdenAber ich habe kein richtiges Beispiel für die vollständige Umsetzung dieser Lebenszyklus-Methode gesehen.
Ich weiß, wie man Timer ungültig macht. Wie beim Abbrechen von Netzwerkanforderungen wird fetch meistens in reaktiven Projekten über jQuery's verwendet und hat die Funktionalität noch nicht abgebrochen.
Es ist also der letzte Teil, den ich mich frage: Aufräumen aller DOM-Elemente, die in componentDidMount
erstellt wurdenWas heißt das? Wie kann ich es implementieren?
Wenn die sendende Bibliothek für das Senden von Netzwerkaufträgen das Abbrechen des laufenden Netzwerkanforderungsaufrufs unterstützt, können Sie das definitiv in componentWillUnmount method aufrufen.
Aber wenn wir die DOM Elemente bereinigen, werde ich einige Beispiele nach meiner Erfahrung und Verwendung geben.
Der erste ist -
%Vor%Hier entferne ich den Click-Ereignis-Listener, den ich hinzugefügt habe, als die Komponente geladen wurde.
Der zweite ist -
%Vor% Hier versuche ich d3.js mit react zu integrieren. In componentWillUnmount Ich entferne das Diagrammelement aus dem Dom.
Abgesehen davon habe ich componentWillUnmount verwendet, um die Bootstrap Modals nach dem Öffnen zu bereinigen.
Ich bin mir sicher, dass es noch viele andere Anwendungsfälle gibt, aber das sind die Fälle, in denen ich sie verwendet habe. Ich hoffe es hilft dir.
Beim Erstellen von Components mit React fügt sich nicht jede Bibliothek gut in die Philosophie ein, das DOM verwalten zu wollen.
Ein Beispiel hierfür wäre eine grafische Bibliothek wie c3 . c3 erwartet einen DOM-Knoten und erstellt / verwaltet sein eigenes Markup außerhalb von React. In diesem Fall sollten Sie alle von dieser Bibliothek erstellten Elemente bereinigen, wenn Ihre Komponente aus dem DOM entfernt wird.
Hier erstellt React ein einzelnes div als Platzhalter für c3 , um den Inhalt hinzuzufügen. Dieser Prozess wird im Hook componentDidMount lifecycle gestartet und in componentWillUnmount erneut bereinigt.
Tags und Links javascript frontend reactjs