Entfernen eines DOM-Elements einer eingehängten Komponente

Question

Ich arbeite an einem Projekt, das React Component in eine NON-react-Umgebung integriert.

Das Projekt verwendet Backbone und wir migrieren langsam einige Teile der Website zu React.

Meine Frage:
Wird durch Entfernen eines DOM-Knotens (durch Backbone/Jquery) der mit der React-Komponente verbundene Speicher freigegeben?
Die Dokumentation besagt eindeutig, dass Sie Ihre eigenen Mounting/Un-Mounting verwalten müssen, aber ich frage mich, ob das Entfernen des DOM den Speicher für mich aufräumen wird, oder muss ich mich über Speicherlecks in einem langlebigen sorgen Seite?

ein Beispiel usecase navigiert (mit unserem Backbone-Router) und re-rendering die Seite, das entfernt alle vorherigen Knoten und baut neue html - Was passiert also mit allen montierten react-Komponenten?

Bearbeiten:
Um klar zu sein, ich bin nicht eine gerenderte Komponente mit jQuery ändern.

class App extends React.Component{ 
    render(){ 
     return (<div>Amazing</div>); 
    } 
} 



//extreme use case, render a component, remove the DOM node, create a new DOM node 
setInterval(function(){ 
    ReactDOM.render(React.createElement(App),document.getElementById('app')); 
    $('#app').remove(); 
    $('body').append($('<div id="app">')); 
},250) 

Edit: Nachdem das Problem zu untersuchen, müssen Sie entfernten Knoten erkennen MutationObserver verwenden und aushängen ihnen, wenn Sie die Knoten im Speicher zu erbringenden nicht tun wird fortgesetzt. Ich schrieb eine vollständige Beschreibung hier:

https://medium.com/@patrick.tolosa/backbone-router-with-react-components-13791727a351

Answer 1

Wenn Sie einen DOM-Knoten entfernen, die direkt gerendert reagieren, indem sie die DOM-Manipulation, Reaktion wird nicht dieser Veränderungen kennen. Wenn die React-Komponente dann erneut gerendert wird, wird der zuvor entfernte DOM-Knoten erneut angezeigt, da er noch in Reacts virtual DOM vorhanden ist.

Sie sollten vermeiden, die Teile des DOM zu manipulieren, die React erstellt hat. Dies kann zu unerwünschtem Verhalten in Ihrer Anwendung führen.

Um zum Beispiel einen DOM-Knoten zu entfernen, die wiedergegeben reagieren, um die folgende Ausnahme werfen kann wieder machen:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 

oder eine andere DOMException.

---

Hier ist, was die official documentation sagt über die DOM-Aktualisierung:

Reagieren nicht bewusst Änderungen an den DOM außerhalb von React hergestellt ist. Es bestimmt Updates basierend auf seiner eigenen internen Darstellung, und wenn die gleichen DOM-Knoten von einer anderen Bibliothek manipuliert werden, wird React verwirrt und hat keine Möglichkeit zur Wiederherstellung. Dies bedeutet nicht, dass es unmöglich oder sogar notwendig schwierig ist, kombinieren Reagieren mit anderen Möglichkeiten, das DOM zu beeinflussen, müssen Sie nur auf achten, was jeder tut.

Die einfachste Möglichkeit, Konflikte zu vermeiden, besteht darin, zu verhindern, dass die React-Komponente aktualisiert wird. Sie können dies tun, indem Sie Elemente rendern, die React keinen Grund hat, um zu aktualisieren, wie eine leere <div />.

Es geht weiter mit einer Beispielintegration von React mit jQuery, here.

Schließlich schlage ich weiterlesen auf die Virtual DOM. Die offizielle Dokumentation scheint nicht viel zu sagen, aber suchen Sie online und Sie werden eine Fülle von Leitfäden finden; wie this one.