Echtes/Browser-DOM:

DOM steht für 'Dokumentobjektmodell'. Es handelt sich um eine strukturierte Darstellung von HTML in der Webseite oder Anwendung. Es repräsentiert die gesamte Benutzeroberfläche (Benutzeroberfläche) des Webanwendung als Baumdatenstruktur.

es ist ein Strukturelle Darstellung von HTML-Elementen einer Webanwendung in einfachen Worten.

Immer wenn sich etwas ändert Status der Anwendungs-Benutzeroberfläche, DOM wird aktualisiert und stellt die Änderung dar. Das DOM wird bei jeder Änderung gerendert und manipuliert, um die Benutzeroberfläche der Anwendung zu aktualisieren, was sich auf die Leistung auswirkt und sie verlangsamt.

Daher mit vielen UI-Komponenten und der komplexen Struktur von DOM, Die Aktualisierung wird teurer, da sie bei jeder Änderung neu gerendert werden muss.

Das DOM ist als Baumdatenstruktur aufgebaut. Es besteht aus dem Knoten für jeden UI-Element im Webdokument vorhanden.

Array-Liste sortieren Java

Aktualisieren des DOM:

Wenn wir etwas über JavaScript wissen, sehen Sie möglicherweise Leute, die das verwenden 'getElementById()' oder 'getElementByClass()' Methode zum Ändern des Inhalts von DOM.

Immer wenn sich der Status Ihrer Anwendung ändert, wird das DOM aktualisiert, um die Änderung in der Benutzeroberfläche widerzuspiegeln.

Wie Virtual DOM die Dinge beschleunigt:

Wenn der Anwendung neue Dinge hinzugefügt werden, wird das virtuelle DOM erstellt und als Baum dargestellt. Jedes Element in der Anwendung ist ein Knoten im Baum.

Daher wird bei jeder Änderung der Position eines Elements ein neues virtuelles DOM erstellt. Der neuere virtuelle DOM-Baum wird mit dem neuesten verglichen, wobei die Änderungen vermerkt werden.

Es findet die Möglichkeit, diese Änderungen über das eigentliche DOM vorzunehmen. Dann würden die aktualisierten Elemente auf der Seite neu gerendert.

Wie Virtual DOM bei React hilft:

Alles in React wird als Komponente, Funktionskomponente und Klassenkomponente betrachtet. Eine Komponente hat einen Zustand. Immer wenn wir etwas in der JSX-Datei ändern, aktualisiert der React, vereinfacht gesagt, den Status der Komponente, seinen virtuellen DOM-Baum.

React verwaltet jedes Mal zwei virtuelle DOMs. Das erste enthält das aktualisierte virtuelle DOM und das andere ist eine vorab aktualisierte Version des aktualisierten virtuellen DOM. Es vergleicht die vorab aktualisierte Version des aktualisierten virtuellen DOM und findet heraus, was im DOM geändert wurde, beispielsweise welche Komponenten geändert werden.

Auch wenn es wirkungslos erscheinen mag, sind die Kosten nicht höher, da die Aktualisierung des virtuellen DOM nicht viel Zeit in Anspruch nehmen kann.

Beim Vergleich wird der aktuelle virtuelle DOM-Baum mit dem vorherigen verglichen 'herausfordernd'. Sobald React weiß, was sich geändert hat, aktualisiert es die Objekte im eigentlichen DOM. React verwendet Batch-Updates, um das eigentliche DOM zu aktualisieren. Änderungen am tatsächlichen DOM werden stapelweise gesendet, anstatt Aktualisierungen für die einzelne Änderung des Komponentenstatus zu senden.

Das erneute Rendern der Benutzeroberfläche ist der teuerste Teil, und React gelingt dies am effizientesten, indem sichergestellt wird, dass das echte DOM, das die Stapelaktualisierungen empfängt, die Benutzeroberfläche neu rendert. Der Prozess der Konvertierung der Änderungen in das eigentliche DOM wird aufgerufen Versöhnung.

Es verbessert die Leistung und ist der Hauptgrund, warum Entwickler React und sein Virtual DOM lieben.

Was ist das virtuelle DOM von React?

Das Konzept von Virtual DOM zielt darauf ab, die Leistung von Real DOM zu verbessern und zu beschleunigen. Virtual DOM ist ein virtuelles Symbol des DOM.

Der Hauptunterschied besteht jedoch darin, dass bei jeder Änderung das virtuelle DOM anstelle des tatsächlichen DOM aktualisiert wird.

Zum Beispiel die real Und virtuelles DOM wird als a dargestellt Baumstruktur. Jedes Element im Baum ist ein Knoten. A Knoten wird der Baumstruktur hinzugefügt, wenn ein neues Element zur Benutzeroberfläche der Anwendung hinzugefügt wird.

Wenn sich die Position von Elementen ändert, a neu Es wird ein virtueller DOM-Baum erstellt. Das virtuelle DOM berechnet die minimale Anzahl von Operationen auf dem realen DOM, um Änderungen am realen DOM vorzunehmen. Es ist effizient und bietet eine bessere Leistung, da die Kosten und der Aufwand für das erneute Rendern des gesamten realen DOM reduziert werden.

Jetzt haben wir ein normales Verständnis von realem und virtuellem DOM.

Schauen wir uns an, wie Reagieren Funktioniert durch die Verwendung Virtuelles DOM.

• Jede Benutzeroberfläche ist ein Individuum Komponente, und jede Komponente hat ihren Zustand.
• Reaktion folgt beobachtbare Muster und beobachtet die Zustandsänderungen.
• Wann immer eine Änderung am Zustand der Komponente vorgenommen wird, reagiert Reagieren aktualisiert den virtuellen DOM-Baum ändert aber nichts daran tatsächlicher DOM-Baum.
• Reagieren vergleicht Die aktuelle Version des virtuelles DOM mit dem vorherige Version nach Aktualisierung.
• React weiß, welche Objekte im geändert werden virtuelles DOM. Es ersetzt die Objekte in der tatsächliches DOM , was zu minimale Manipulation Operationen.
• Dieser Vorgang ist bekannt als 'Differenzierung'. Dieses Bild wird das Konzept verdeutlichen.

Auf dem Bild ist das Dunkelblau Kreise sind die Knoten die geändert wurden. Der Zustand dieser Komponenten hat sich geändert. React berechnet den Unterschied zwischen der vorherigen und der aktuellen Version des virtueller DOM-Baum, und der gesamte übergeordnete Unterbaum wird neu gerendert, um die geänderte Benutzeroberfläche anzuzeigen.

Der aktualisierte Baum ist Charge aktualisiert (dass Aktualisierungen an das reale DOM stapelweise gesendet werden, anstatt Aktualisierungen für jede Statusänderung zu senden.) an das reale DOM.

Um näher darauf einzugehen, müssen wir etwas darüber wissen Rendern () reagieren Funktion.

Dann müssen wir über einige der wichtigen Dinge Bescheid wissen Merkmale von React.

JSX

JSX steht für JavaScript-XML. es ist ein Syntaxerweiterung von JS. Mit JSX können wir schreiben HTML-Strukturen in der Datei, die enthält JavaScript-Code.

Komponenten

Komponenten sind unabhängig Und wiederverwendbar von Code. Jede Benutzeroberfläche in der React-App ist eine Komponente. Eine einzige Anwendung hat viele Komponenten.

Es gibt zwei Arten von Komponenten: Klassenkomponenten Und funktionale Komponenten.

Klassenkomponenten sind zustandsbehaftet, da sie ihren „Zustand“ verwenden, um die Benutzeroberfläche zu ändern. Funktionskomponenten sind zustandslose Komponenten. Sie verhalten sich wie eine JavaScript-Funktion, die einen beliebigen Parameter namens „props“ akzeptiert.

Reagieren Sie auf Hooks wurden eingeführt, um mit funktionalen Komponenten auf Zustände zuzugreifen.

Lebenszyklusmethoden

Lebenszyklusmethoden sind wichtige Methoden eingebaut reagieren, die während ihrer gesamten Dauer im DOM auf Komponenten einwirken. Jede Komponente von React durchlief einen Lebenszyklus von Ereignissen.

Die Methode render() wird maximal verwendet Lebenszyklusmethode .

Es ist die einzige Methode innerhalb Klassenkomponenten reagieren . Daher wird in jeder Klasse die Komponente render() aufgerufen.

Die render()-Methode kümmert sich um das Rendern der Komponente durch die Benutzeroberfläche. Die render() enthält die gesamte auf dem Bildschirm angezeigte Logik. Es kann auch eine haben Null Wert, wenn wir nichts auf dem Display zeigen wollen.

Das Beispiel ist unten dargestellt:

 class Header extends React.Component{ render(){ return React Introduction } } 

Das Beispiel zeigt das JSX in render() geschrieben.

Wenn ein Zustand oder Stütze wird innerhalb der Komponente aktualisiert, machen() gibt einen anderen Baum von React-Elementen zurück.

Beim Schreiben des Codes in die Konsole oder die JavaScript-Datei geschieht Folgendes:

Java-Arrays

• Der Browser analysiert den HTML-Code, um den Knoten mit der ID zu finden.
• Es entfernt das untergeordnete Element des Elements.
• Es aktualisiert das Element (DOM) mit dem 'aktualisierter Wert'.
• Es wird neu berechnet CSS für übergeordnete und untergeordnete Knoten.
• Aktualisieren Sie dann das Layout.

Durchlaufen Sie abschließend den Baum auf der Bildschirmanzeige.

So wie wir wissen, dass die Aktualisierung der DOM beinhaltet eine Änderung des Inhalts. Es hängt mehr daran.

Bei der Neuberechnung von CSS und der Änderung der Layouts sind komplexe Algorithmen beteiligt, die sich auf die Leistung auswirken.

React hat also viele Möglichkeiten, damit umzugehen, da es etwas verwendet, das als virtuelles DOM bekannt ist.

Reaktionsdome

Das Paket „react-dom“ stellt DOM-spezifische Methoden auf der obersten Ebene der Anwendung bereit, um bei Bedarf einen Fluchtweg aus dem React-Modell zu ermöglichen.

 import * as ReactDOM from 'react-dom'; 

Wenn Sie ES5 mit npm verwenden, sollten Sie außerdem Folgendes schreiben:

 var ReactDOM = require('react-dom'); 

Der Reaktionsdom Das Paket stellt außerdem Module bereit, die speziell für die Client- und Server-Apps gelten:

• React-Dom/Client
• React-Dom/Server

Die React-Dom-Paketexporte dieser Methoden:

• createPortal()
• FlushSync()

Die React-Dom-Methoden werden ebenfalls exportiert:

• render ()
• Hydrat ()
• findDOMNode()
• unmountComponentAtNode ()

Hinweis: Sowohl Hydrate als auch Render wurden durch neuere Client-Methoden ersetzt.

Browser-Unterstützung

React unterstützt alle modernen Browser und für ältere Versionen sind einige Polyfills erforderlich.

Hinweis: Wir können ältere Browser, die ES5-Methoden nicht unterstützen, wie Internet Explorer, nicht unterstützen. Sie können feststellen, dass Apps in den neuesten Browsern funktionieren, wenn Polyfills wie es5-shim und es5-sham auf der Seite enthalten sind, aber Sie sind auf sich allein gestellt, wenn Sie den Weg wählen.

Referenz

createPortal()

Erstellt Portal (). Portal bietet die Möglichkeit, untergeordnete Elemente in den DOM-Knoten einzulesen, der außerhalb der Rangfolge der DOM-Komponente existiert.

FlushSync()

Erzwingen Sie die gleichzeitige Reaktion auf Aktualisierungen im bereitgestellten Rückruf. Es stellt sicher, dass das DOM sofort aktualisiert wird.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

Notiz:

• Sparsam verwenden. Flush Sync beeinträchtigte die Leistung erheblich.
• FlushSync erzwingt, dass ausstehende Grenzen den Fallback-Status anzeigen.
• Es führt ausstehende Effekte aus und wendet gleichzeitig die Aktualisierungen an, bevor es zurückgegeben wird.
• FlushSync löscht Aktualisierungen außerhalb des Rückrufs, um die Aktualisierungen im Rückruf zu leeren. Zum Beispiel, Wenn durch einen Klick Aktualisierungen ausstehen, kann React diese leeren, bevor die Aktualisierungen beim Rückruf gelöscht werden.

Legacy-Referenz

machen()

 render(element, container[, callback]) 

Hinweis: Rendern wird durch das Erstellen von Root in React ersetzt. Rendern Sie ein React-Element im DOM am bereitgestellten Container und geben Sie einen Verweis auf die Komponente zurück.

Wenn ein React-Element zuvor in einem beliebigen Container gerendert wurde, würde es eine Aktualisierung durchführen und es ist notwendig, das neueste React-Element wiederzugeben.

Es wird beim Rendern der Komponente ausgeführt, wenn der optionale Rückruf bereitgestellt wird.

Notiz:

Die Render()-Methode steuert den Inhalt des Containerknotens, wenn er vorbeikommt. Alle vorhandenen DOM-Elemente werden ersetzt.

Render() verändert den Knoten des Containers nicht (es kann nur die untergeordneten Elemente des Containers ändern). Möglicherweise ist es möglich, eine Komponente in einen vorhandenen DOM-Knoten einzufügen, ohne die untergeordneten Elemente zu überschreiben.

Render() verweist derzeit auf die Root-Instanz von ReactComponent.

Der Rückgabewert wird jedoch vererbt und kann vermieden werden, da zukünftige Versionen von React in einigen Fällen möglicherweise Komponenten asynchron generieren.

Wenn Sie eine Referenz auf den ReactComponent-Prototyp benötigen, besteht die beste Lösung darin, eine Rückrufreferenz an das Element anzuhängen.

Render() wird verwendet, um einen gerenderten Container auf den Server zu übertragen. Dies ist veraltet. Verwenden hydrateRoot() stattdessen.

Hydrat()

Hydrat wird durch die Hydratwurzel ersetzt.

Es ist genau wie render(), wird jedoch für einen Container verwendet, dessen HTML-Inhalt von ReactDOMServer gerendert wird. React versucht, Ereignis-Listener mit dem aktuellen Markup zu verbinden.

 hydrate(element, container[, callback]) 

Notiz:

React geht davon aus, dass der gerenderte Inhalt zwischen Server und Client identisch ist. Wir können den Inhalt des Textes korrigieren, aber wir müssen die Inkonsistenzen als Fehler behandeln und korrigieren. Im Entwicklungsmodus warnt React vor der Inkonsistenz während der Hydratation.

Es gibt keine Gewähr dafür, dass Abweichungen bei bestimmten Abweichungen korrigiert werden.

Dies ist in den meisten Anwendungen aus Leistungsgründen wichtig und es wäre zu teuer, alle Flags zu validieren.

slf4j vs. log4j

Angenommen, das Attribut oder der Textinhalt eines Elements unterscheidet sich zwangsläufig zwischen dem Server und dem Client (z. B. der Zeitstempel ). In diesem Fall können wir die Warnung durch Hinzufügen stummschalten supprimHydrationWarning = {true} zum Element.

Wenn es sich nicht um ein Textelement handelt, kann nicht versucht werden, es zu patchen, sodass es möglicherweise bis zu zukünftigen Updates inkonsistent bleibt.

Sie können ein Rendern in zwei Durchgängen durchführen, wenn wir auf dem Server und dem Client bewusst unterschiedliche bereitstellen müssen. Auf dem Client verbleibende Komponenten können Statusvariablen wie this.state.isClient lesen und werden dort auf „true“ gesetzt ComponentDidMount().

Der erste Render-Durchgang macht dasselbe wie der Server und vermeidet Inkonsistenzen, aber der zusätzliche Durchgang wird synchron nach der Hydratation durchgeführt.

Hinweis: Bei diesem Ansatz werden die Komponenten langsamer, da sie den Vorgang zweimal ausführen. Gehen Sie daher vorsichtig vor.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Notiz:

unmountComponentAtNode wurde durch ersetzt root.unmount() in Reagieren. Es löscht die gemountete React-Komponente aus dem DOM und bereinigt ihre Event-Handler und ihren Status.

Wenn keine Komponente an den Container gemountet wurde, kann er nichts tun. Gibt „true“ zurück, wenn keine Komponente gemountet ist, und „false“, wenn keine Komponente zum Aufheben der Bereitstellung vorhanden ist.

findDOMNode()

Hinweis: findDOMNode ist eine Fluchtklappe, die für den Zugriff auf den zugrunde liegenden DOM-Knoten verwendet wird. Von dieser Notluke wird in den meisten Fällen abgeraten, da sie die Komponentenabstraktion durchdringt. Es ist im StrictMode veraltet.

findDOMNode(Komponente)

Wenn diese Komponente im DOM gemountet wurde, wird das entsprechende native Browser-DOM-Element zurückgegeben. Diese Methode eignet sich zum Lesen von Werten aus dem DOM, z. B. Formularfeldwerten, und zum Durchführen von DOM-Messungen. In den meisten Fällen können Sie einen Verweis auf den DOM-Knoten anhängen und die Verwendung von findDOMNode vermeiden.

Wenn eine Komponente null oder false zurückgibt, gibt findDOMNode null zurück. Wenn eine Komponente in einen String gerendert wird, gibt findDOMNode einen Text-DOM-Knoten zurück, der diesen Wert enthält. Die Komponente kann ein Fragment mit mehreren untergeordneten Elementen zurückgeben, falls findDOMNode den DOM-Knoten zurückgegeben hat, der dem ersten nicht leeren untergeordneten Element entspricht.

Notiz:

findDOMNode funktioniert nur bei gemounteten Komponenten (d. h. Komponenten, die im DOM platziert wurden). Wenn Sie versuchen, dies für eine Komponente aufzurufen, die noch nicht gemountet wurde (z. B. indem Sie findDOMNode() auf render() für eine Komponente aufrufen, die noch nicht erstellt wurde), wird eine Ausnahme ausgelöst.

findDOMNode kann nicht in Funktionskomponenten verwendet werden.

DOM-Elemente

React implementiert ein browserunabhängiges DOM-System für die Leistung und mit Cross-Browser-Kompatibilität. Wir nutzen diese Gelegenheit, um einige Ecken und Kanten in der DOM-Implementierung des Browsers zu beseitigen.

In React müssen alle DOM-Eigenschaften und -Attribute (einschließlich Ereignishandler) in Camelcase vorliegen. Beispielsweise entspricht das HTML-Attribut „tabindex“ dem Attribut „tab Index“ in React.

Ausnahmen bilden die Attribute aria-* und data-*, die in Kleinbuchstaben geschrieben sein müssen. Sie können beispielsweise ein Bereichs-Tag als Bereichs-Tag verwenden.

Unterschiede in den Attributen

Mehrere Attribute funktionieren zwischen React und HTML unterschiedlich:

überprüft

Das geprüfte Attribut wird von Komponenten eines Kontrollkästchens oder Radios vom Typ unterstützt. Es ist nützlich für die Herstellung kontrollierter Komponenten. Damit können Sie feststellen, ob die Komponente geprüft ist oder nicht.

DefaultChecked ist das ungeprüfte Gegenstück, das bestimmt, dass die Komponente beim ersten Mounten überprüft wird.

Klassenname

Um die CSS-Klasse anzugeben, verwenden Sie das className-Attribut. Es gilt für alle regulären DOM- und SVG-Elemente wie , , usw.

Wenn Sie „Reagieren mit Webkomponenten“ verwenden (ungewöhnlich), verwenden Sie stattdessen das Klassenattribut.

zip-Befehl unter Linux

gefährlichSetInnerHTML

Dangerously SetInnerHTML ist Reacts Ersatz für die Verwendung von innerHTML im DOM-Browser. Das Konfigurieren von HTML-Code ist riskant, da Benutzer leicht einem Cross-Site-Scripting-Angriff (XSS) ausgesetzt werden können.

Wir können also HTML direkt aus React festlegen, aber Sie müssen SetInnerHTML gefährlich eingeben und ein Objekt mit dem Schlüssel __html übergeben, um sich daran zu erinnern, dass es gefährlich ist.

Zum Beispiel:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

React-Elemente verwenden stattdessen htmlFor, da for ein reserviertes Wort in JavaScript ist.

bei Änderung

Das onChange-Ereignis verhält sich wie erwartet; Das Ereignis wird jedes Mal ausgelöst, wenn ein Formularfeld geändert wird.

Wir verwenden absichtlich nicht das vorhandene Browserverhalten, da Änderungen für sein Verhalten von großer Bedeutung sind und React auf das Ereignis angewiesen ist, um Benutzereingaben in Echtzeit zu verarbeiten.

ausgewählt

Wenn Sie die als ausgewählt markieren möchten, beziehen Sie sich stattdessen auf den Wert dieser Option im Wert von . Ausführliche Anweisungen finden Sie unter „Tag auswählen“.

Notiz:

In den meisten Fällen beziehen sich Klassennamen auf Klassen, die in einem externen CSS-Stylesheet definiert sind. Stile werden in React-Apps verwendet, um beim Rendern berechnete Stile hinzuzufügen. Das style-Attribut akzeptiert das JavaScript-Objekt mit Camel-Eigenschaften anstelle einer CSS-Zeichenfolge.

Es passt sich an DOM-Stil JavaScript-Eigenschaften sind effizienter und vermeiden XSS Sicherheitslücken.

Zum Beispiel:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

Beachten Sie Folgendes: Stile werden nicht automatisch vorangestellt. Um ältere Browser zu unterstützen, müssen wir Stileigenschaften bereitstellen:

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

Stilschlüssel sind Camel, um dem Zugriff auf Eigenschaften auf DOM-Knoten aus JS heraus zu entsprechen. Anbieterpräfixe MS beginnen mit einem Großbuchstaben.

React fügt einigen Inline-Zahlenstileigenschaften automatisch das Suffix „px“ hinzu. Wenn wir andere Einheiten als „px“ verwenden möchten, geben Sie den Wert als Zeichenfolge mit der gewünschten Einheit an.

Zum Beispiel:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

Allerdings werden nicht alle Stileigenschaften in Pixelzeichenfolgen konvertiert.

Warnung zu bearbeitbarem Inhalt unterdrücken

Es gibt eine Warnung, wenn ein Element für Kinder als bearbeitbar markiert ist, da es nicht funktioniert. Das Attribut unterdrückt die Warnung.

Unterdrückungswarnung

Wenn wir serverseitiges React-Rendering verwenden, ist dies eine Warnung, wenn Server und Client mit unterschiedlichen Inhalten rendern. Allerdings ist es in seltenen Fällen schwierig, eine exakte Übereinstimmung zu garantieren. Es wird beispielsweise erwartet, dass sich die Zeitstempel auf dem Server oder dem Client unterscheiden.

Wenn Sie die Unterdrückungswarnung auf „true“ setzen, wird keine Warnung vor Nichtübereinstimmungen zwischen Attributen und Inhalt des Elements ausgegeben.

Es funktionierte nur in einer Tiefe von einer Ebene und sollte als Fluchtweg genutzt werden.

Wert

Das Wertattribut wird durch die Komponenten , und entworfen. Sie können damit den Wert der Komponente festlegen.

Es ist nützlich für die Herstellung kontrollierter Komponenten. defaultValue und equal to unchecked legen den Wert der Komponente fest, wenn sie seriell gemountet wird.

Alle unterstützten HTML-Attribute

Alle benutzerdefinierten und standardmäßigen DOM-Attribute werden unterstützt.

React hat eine JavaScript-zentrierte API im DOM bereitgestellt. Und React-Komponenten enthalten häufig benutzerdefinierte und DOM-bezogene Requisiten, und dann verwendet React dieselben CamelCase-Konventionen wie die DOM-API:

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API