Effiziente DOM-Manipulation mit dem virtuellen DOM und Refs

Das Geheimnis schneller und reaktionsfähiger Websites
Haben Sie sich jemals gefragt, warum Ihre Lieblingswebsites so schnell und reaktionsschnell sind? Es läuft alles darauf hinaus, wie sie mit der DOM-Manipulation umgehen. Das Document Object Model (DOM) stellt Ihre Webseite als strukturierten Baum dar. Traditionell haben wir JavaScript-Methoden wie getElementById oder removeChild verwendet, um Änderungen vorzunehmen. Wenn Websites jedoch komplexer werden, können diese Methoden die Arbeit verlangsamen. Hier kommt React mit seinem bahnbrechenden virtuellen DOM ins Spiel.

Die Herausforderung bei der traditionellen DOM-Manipulation
Stellen Sie sich den DOM als einen riesigen Baum mit Tonnen von Ästen vor. Jedes Mal, wenn Sie etwas ändern möchten, z. B. das erste Element in einer Liste mit zehn Einträgen, rüttelt am Ende der gesamte Baum. Dies kann die Geschwindigkeit verlangsamen, insbesondere wenn Webseiten komplexer werden. Je mehr Zweige (Elemente) Sie haben, desto schwieriger wird es, dafür zu sorgen, dass alles reibungslos läuft.

Reacts Lösung: Das virtuelle DOM
React behebt dieses Problem mit dem Virtual DOM, einer schlanken Kopie des HTML-DOM. Änderungen werden zunächst auf das virtuelle DOM angewendet, und dann aktualisiert React das reale DOM effizient, um diese Änderungen widerzuspiegeln. Dieser Prozess, bekannt als Reconciliation, stellt sicher, dass nur die notwendigen Teile des DOM aktualisiert werden, was die Leistung erheblich verbessert.

So funktioniert das virtuelle DOM
Wenn Sie ein JSX-Element in React rendern, wird das gesamte virtuelle DOM aktualisiert. Obwohl dies ineffizient klingen mag, ist es schneller als die direkte Manipulation des echten DOM. Hier ist der Grund: React erstellt eine Kopie des virtuellen DOM, bevor es Aktualisierungen vornimmt. Anschließend vergleicht es das aktualisierte virtuelle DOM mit dieser Kopie mithilfe eines Prozesses namens Diffing. Dieser Vergleich identifiziert die spezifischen Elemente, die sich geändert haben, und React aktualisiert nur diese Elemente im echten DOM.

Unter der Haube: Der Diffing-Algorithmus von React
Der Diffing-Algorithmus von React ist das Geheimnis seiner effizienten DOM-Updates. Dieser Algorithmus vergleicht zwei Versionen des virtuellen DOM und wendet die minimalen Änderungen an, die zu ihrer Synchronisierung erforderlich sind.
Wenn die Wurzelelemente zweier Bäume unterschiedlichen Typs sind, erstellt React den gesamten Baum neu. Wenn Sie beispielsweise ein

in ein ändern, führt React dazu, dass der Baum abgerissen und von Grund auf neu aufgebaut wird.

<div>
  <Tree/>
</div>
<span>
  <Tree/>
</span>

Da die Wurzelelemente (div und span) unterschiedlich sind, rekonstruiert React den gesamten Baum.

Gleiche Elementtypen

<span id="span1" />
<span id="span2" />

Hier aktualisiert React nur das ID-Attribut und lässt den Rest des Elements intakt.

Untergeordnete Elemente vergleichen

React optimiert auch Updates für untergeordnete Elemente. Betrachten Sie diese Listen:

<ul>
  <li>Child1</li>
  <li>Child2</li>
</ul>

<ul>
  <li>Child1</li>
  <li>Child2</li>
  <li>Child3</li>
</ul>

React betrachtet Child3 als neu und aktualisiert entsprechend. Wenn jedoch zu Beginn ein neues Element hinzugefügt wird, erstellt React möglicherweise die gesamte Liste neu. Hier kommen die Schlüssel ins Spiel.
Die Rolle von Schlüsseln bei der Optimierung von Updates

Tasten helfen React dabei, zu verfolgen, welche Elemente geändert, hinzugefügt oder entfernt wurden. Sie sollten unter Geschwistern einzigartig und über alle Renderings hinweg stabil sein.

<ul>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

<ul>
  <li key="100">Child3</li>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

In diesem Beispiel weiß React, dass Child3 neu ist und aktualisiert die Liste effizient, ohne sie neu zu erstellen.

Das DOM mit Refs manipulieren
Während React DOM-Updates mit seinem virtuellen DOM optimiert, gibt es Szenarien, in denen eine direkte Manipulation von DOM-Elementen erforderlich ist, z. B. das Fokussieren einer Eingabe, das Scrollen zu einem bestimmten Element oder das Messen der Abmessungen eines Elements. React stellt zu diesem Zweck den useRef Hook zur Verfügung. Indem Sie einen Ref erstellen und ihn über das Ref-Attribut an ein DOM-Element anhängen, können Sie direkten Zugriff auf den DOM-Knoten erhalten. Der useRef-Hook gibt ein Objekt mit einer aktuellen Eigenschaft zurück, die zunächst null ist, aber nach dem Rendern dem DOM-Knoten zugewiesen wird. Dadurch können Sie native DOM-Methoden direkt für das Element aufrufen und so die Kontrolle über bestimmte Interaktionen verbessern. Sie können beispielsweise myRef.current.scrollIntoView() verwenden, um das Element in die Ansicht zu scrollen.

Beispiel: Farbwechsel-Div
Lassen Sie uns ein unterhaltsames Beispiel erstellen, um dies in Aktion zu sehen. Wir erstellen ein Div, dessen Farbe sich ändert, wenn Sie auf eine Schaltfläche klicken. Wir verwenden eine klassenbasierte Komponente und einen Verweis, um den Stil des Divs direkt zu manipulieren.

<div id="root"></div>

const root = ReactDOM.createRoot(document.getElementById('root'));

class ColorChanger extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
    this.colors = ['#FFCDD2', '#C8E6C9', '#BBDEFB', '#FFF9C4', '#D1C4E9'];
    this.state = { colorIndex: 0 };
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor() {
    const nextColorIndex = (this.state.colorIndex + 1) % this.colors.length;
    this.setState({ colorIndex: nextColorIndex });
    this.divRef.current.style.backgroundColor = this.colors[nextColorIndex];
  }

  render() {
    return (
      <div className="container">
        <div
          ref={this.divRef}
          className="color-box"
          style={{
            backgroundColor: this.colors[this.state.colorIndex],
          }}
        ></div>
        <button onClick={this.changeColor}>Change Color</button>
      </div>
    );
  }
}

root.render(<ColorChanger />);

Erklärung

Erstellen des Stammverzeichnisses: Das Stammverzeichnis der React-App wird mit ReactDOM.createRoot(document.getElementById('root')) erstellt.
ColorChanger-Komponente:
Konstruktor: Initialisiert die Referenz mit React.createRef(), richtet das Farbarray ein und initialisiert den Status, um den Farbindex zu verfolgen.
changeColor-Methode: Berechnet den nächsten Farbindex, aktualisiert den Status und ändert die Hintergrundfarbe des Divs durch direkte Manipulation des DOM.
Render-Methode: Rendert das Div und die Schaltfläche, hängt die Referenz an das Div an und setzt den onClick-Handler der Schaltfläche auf „changeColor“.
Rendern der Komponente: Die ColorChanger-Komponente wird im Stammelement gerendert.
Fazit
Das Virtual DOM von React verändert die Webentwicklung grundlegend und macht unsere Apps effizienter und reaktionsschneller. Durch die Nutzung des virtuellen DOM stellt React sicher, dass nur die notwendigen Teile des DOM aktualisiert werden, was die Leistung steigert. Wenn Sie verstehen, wie der Diffing-Algorithmus und die Schlüssel von React funktionieren, können Sie reibungslosere und schnellere React-Anwendungen erstellen. Und wenn Sie eine präzise Kontrolle benötigen, stehen Ihnen die Refs von React zur Seite, um Ihnen bei der direkten Interaktion mit dem DOM zu helfen. Nutzen Sie die Leistungsfähigkeit des Virtual DOM und bringen Sie Ihre Webentwicklungsfähigkeiten auf die nächste Stufe!

Das obige ist der detaillierte Inhalt vonEffiziente DOM-Manipulation mit dem virtuellen DOM und Refs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!