Das ReactDOM-Paket und seine Verwendung

Jeder React-Entwickler hat einen einzigartigen Ansatz zur Verwendung externer Bibliotheken. Einige versuchen, ihre Verwendung auf das Wesentliche zu beschränken, während andere externe Bibliotheken für fast alles verwenden.

Im heutigen Artikel werden wir uns mit einer der wesentlichen Bibliotheken für React befassen, genannt ReactDOM. Dieses Paket stellt die notwendigen Methoden bereit, um das DOM-Rendering in React-Anwendungen zu verwalten.

ReactDOM-Paket in React

In Kombination mit der generischen React-Bibliothek ist dieses Paket erforderlich, um dynamische Anwendungen in React zu erstellen. Es bietet eine entscheidende render()-Funktion, einen wesentlichen Baustein jeder Klassenkomponente.

Im Allgemeinen stellt dieses Paket Methoden für die Interaktion mit DOM bereit, die es uns ermöglichen, das Anwendungs-DOM effizient zu verwalten. Hier ist die Liste der wichtigsten Methoden, die im Paket ReactDOM enthalten sind:

• Render()
• findDOMNode()
• unmountComponentAtNode()
• hydrate()
• createPortal()

Was sind DOM und virtuelles DOM?

Im Wesentlichen ist DOM (kurz für Document Object Model) eine Darstellung einer Webseite als Objekt. Es stellt eine API bereit, um auf den Inhalt der Seite zuzugreifen, ihn zu lesen oder zu ändern.

Vor der Popularität von React arbeiteten JavaScript-Entwickler mit Bibliotheken wie jQuery, um das DOM direkt zu ändern. Die manuelle DOM-Manipulation war ineffizient, da Browser die gesamte Seite neu gerendert haben, selbst wenn die Änderungen am DOM kaum wahrnehmbar waren.

React gewann an Popularität, weil es ein virtuelles DOM bereitstellte, eine willkürliche Kopie von DOM, die die Änderungen verfolgt und das eigentliche DOM auf einmal aktualisiert.

Dieser Ansatz war viel effizienter, sodass Virtual DOM bis heute eines der Kernfeatures von React ist. Die ReactDOM-Bibliothek enthält wesentliche Funktionen für die Interaktion mit DOM in React.

ReactDOM in React installieren

Früher waren ReactDOM-Methoden im generischen Paket enthalten, aber jetzt müssen wir sie separat importieren. Zuerst müssen Sie das App-Verzeichnis auswählen und das Paket installieren, indem Sie Folgendes in die Befehlszeile eingeben:

npm install react-dom

Dann kannst du es importieren. Wenn Sie die moderne Version von JavaScript verwenden, können Sie dies mit der Anweisung import tun:

import ReactDOM from 'react-dom'

Wenn Sie alternativ nur eine render-Methode importieren müssen, können Sie sie wie folgt importieren:

import { render } from 'react-dom'

Sie können das folgende Muster verwenden, um jede andere spezifische Methode zu importieren.