Sollte ich DOM direkt manipulieren oder React state/reps benutzen?

Question

Dies ist die Situation:

Diese Komponente rendert viele Daten als Liste. Wenn ich Zustand/Requisiten reagieren den DOM-Stil zu steuern (Klassen hinzufügen oder einige Attribute ändern), Reaktion immer die render() Funktion ausführen, wenn der Benutzer mit der Liste reagiert, wie mouseover, click und etc ..

Obwohl React hat virtuelle DOM-Technologie, aber ich denke, es ist immer noch sehr ineffizient, render() jedes Mal zu laufen. Die Dokumente empfehlen nicht, DOM direkt zu manipulieren, aber ich denke, es ist effizienter. Was soll ich machen? Danke.

Answer 1

Ich würde nicht mischen schreiben React mit dem DOM direkt manipulieren; mach beides, aber nicht beides.

Wenn Sie bereits React verwenden, verwenden Sie es einfach für das, was Sie wollen. Wenn möglich, zerkleinere die Teile so klein wie möglich. Dies wird der Zahl rendern helfen.

Es könnte etwas ineffizienter sein, wenn React zu viel rendern würde, aber denken Sie daran, dass React für die DOM-Manipulation stark optimiert wurde.

Answer 2

Was das erneute Rendern in react betrifft, wurde es stark optimiert. Sie können denken, dass die render()-Funktion auf jeder kleinen Manipulation ausgeführt wird, aber die Sache, die nicht sichtbar ist, ist, dass die rerender nicht für das gesamte DOM auftritt, sondern nur für den Teil, der geändert wurde.

Reagieren verwendet die virtual DOM technology und dann nimmt es den Unterschied zwischen dem aktuellen und dem virtuellen Dom ähnlich wie Zeichenfolge Vergleich und macht dann nur den Unterschied und ist daher sehr effizient.

Also ich würde Ihnen empfehlen, die Dokumentation zu folgen und nicht DOM-Manipulation mit reagieren.