Traversing/Editing DOM in React JS

Question

Ich bin neu zu reagieren JS und plant, es in einem meiner Projekte zu verwenden. Ich habe die Dokumente durchgelesen und habe eine kleine Idee von React. Ich habe ein Szenario mit den folgenden Details:

1. Server verschiebt Array von Elementen/Liste zu UI in regelmäßigen Abständen.
2. Die Elemente in der Liste sind nicht miteinander oder mit mehreren Listen identisch, werden jedoch in der Reihenfolge angezeigt, in der sie empfangen werden.
3. Elemente müssen an DOM nach AJAX-Antwort/Push-Benachrichtigung vom Server angehängt werden.
4. Wenige Fälle, müssen die Elemente aus DOM basierend auf einer Referenz bearbeiten/löschen.

ich durch einige Artikel in Stapelüberlauf gehen für Daten dynamisch angehängt und einige von ihnen sind unter:

• Can I append my component to a div's existing content in ReactJS?.
• ReactJS component rendering and how to append elements to the div the component is mounted on.
• React.js: How to append a component on click?.
• How to append to dom in React?.

Alle oben genannten Lösungen bieten keine direkte Option zum Anhängen. Sie empfehlen, eine Karte/ein Array zu erstellen und die Werte zur Karte hinzuzufügen und die Werte erneut zu rendern.

Ich bin nicht sehr komfortabel im Umgang mit Karten, da ich nicht die Details zu Server und deren nur Benutzer angezeigt werden, vorbei. Ich denke, das Erstellen einer Karte wird redundante Werte haben, die den Speicher belegen, wenn die Liste riesig wird.

Ich möchte jQuery/keine andere Bibliothek zusammen mit React mischen. Gibt es eine Möglichkeit, wo eine Renderfunktion/Komponente an das DOM angehängt wird, anstatt in einem Array zu bleiben, da die Elemente in der Liste nicht ähnlich sind.

Warum gibt es keine Möglichkeit, DOM direkt zu durchlaufen/bearbeiten, anstatt eine Liste zu pflegen. Können Sie mir sagen, ob es eine Option gibt, damit ich seine Vorteile verstehen kann?

Answer 1

1. Sie müssen auf keinen Fall jQuery oder ein anderes direktes DOM-Manipulationstool verwenden.
2. Es gibt keine Notwendigkeit, über die Tatsache, sich Sorgen zu machen, dass Ihre Liste so groß wird, dass sie die Leistung auswirkt/verbraucht zu viel Speicher - die Tatsache, dass Sie eine Menge von Elementen in der DOM haben die knappen Ressourcen viel früher getroffen. Sie können einfach viel mehr Daten in einer JSON-Map/einem Array speichern, als Sie rendern können.
3. Ich glaube, Sie säen keine Karte, Sie brauchen ein Array, aber das ist keine bedeutende Sache.

So aktualisieren Sie einfach die Daten so, wenn Sie einige Updates vom Server empfangen und übertragen wird, sie kümmern sich um die Anzeige:

onDataReceived(newData) { 
    // or you can mutate the `data` array here, doesn't matter too much 
    this.setState({data: data.concat(newData)}) 
} 

render() { 
    // render this.state.data 
} 

Answer 2

Hallo Ich war genau in der Situation. Von jQuery zu React kürzlich gewechselt. Die Lösung ist Redux. Reagieren wird keinerlei DOM-Manipulation haben. Vergiss also die .parent(). Child(). Next() Dinge, die wir vorher hatten.

Theres dieses Konzept in Redux Kern. Staatliche Verwaltung.Im Grunde ist der Staat ein kleines Werkzeug, das man durch den React-Baum manipulieren muss. Ein bisschen wie die DOM-Manipulation in jQuery aber nicht völlig gleich. Der Zustand wird zwischen Geschwistern, bis zum Elternteil oder bis zum Kind