Re-Rendering-Komponenten auf Zustandsänderung reagieren

1. Status in Reaktion beibehalten
2. In React neu rendern

Einer der Hauptgründe für die Popularität von React ist seine Flexibilität, Effizienz und die Freiheit, die es beim Erstellen dynamischer Webanwendungen bietet. Der Zustand ist eine der grundlegenden Neuerungen der React-Bibliothek.

Status in Reaktion beibehalten

Jede React-Komponente kann ihr internes Zustandsobjekt haben, das die geänderten Werte speichert. Immer wenn sich Statuswerte ändern, werden Anwendungen ebenfalls neu gerendert.

Die natürliche Frage ist, welche Art von Werten sollte der Staat enthalten?

Es gibt keine Begrenzung für das, was Sie im Staat speichern können. Es kann ein beliebiger Datentyp sein (String, Integer, Array, Objekte).

In der Praxis wird der Status häufig verwendet, um von der API empfangene Daten und Werte zu speichern, die von der Eingabe des Benutzers abhängen, z. B. Design- und Authentifizierungseinstellungen. Im Zustandsobjekt könnten Sie eine darkMode-Eigenschaft haben.

Anschließend können Sie bedingte Stile anwenden, um die Dark Mode-Funktion in Ihrer Web-App zu implementieren. Wenn der Wert dieser Eigenschaft false ist, hat Ihre App einen hellen Hintergrund und dunklen Text; wenn es true ist, hat es einen dunklen Hintergrund und weissen Text.

In React neu rendern

React macht seinem Namen alle Ehre, da Statuswertänderungen das erneute Rendern der Anwendung auslösen. Standardmäßig werden alle Komponenten jedes Mal neu gerendert, wenn sich der Status ändert.

Auf den ersten Blick erscheint dieses Standardverhalten ineffizient. Möglicherweise haben Sie eine Komponente mit vielen untergeordneten Elementen, und wenn Sie nur eine Zustandsvariable ändern, sollten nicht alle Komponenten im Baum neu gerendert werden.

Im besten Fall sollte React nur die Komponenten neu rendern, die den aktualisierten Wert anzeigen.

Die Sache ist, dass React das in jeder Hinsicht tut. In Virtual DOM führt ein erneutes Rendern eines Zustands- oder prop-Werts zum erneuten Rendern anderer Komponenten im Baum.

Diese Re-Renderings sind jedoch auf Virtual DOM beschränkt, das nur ein Schatten von Real DOM ist, und daher verbrauchen Re-Renderings nicht zu viele Ressourcen.

In der letzten Phase vergleicht React Virtual DOM mit Real DOM und aktualisiert nur die Teile von Real DOM, die sich von Virtual DOM unterscheiden. Auf diese Weise stellt React sicher, dass alle Änderungen im DOM widergespiegelt werden und bleibt gleichzeitig effizient.

React-Komponenten werden bei Statusänderung neu gerendert

React-Komponenten werden jedes Mal neu gerendert, wenn Sie die setState()-Methode (oder den useState()-Hook) verwenden, um den Status zu aktualisieren.

Schauen wir uns das Live-Beispiel an:

import "./styles.css";
import { useState } from "react";
export default function App() {
  console.log("re-rendered");
  const [text, setText] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setText(e.target.value)} />
      <h1>You entered: </h1>
      <p>{text}</p>
    </div>
  );
}

Hier haben wir eine einfache Anwendung mit einem <input>-Element, einem <h1> und einem <p>. Wir richten eine Zustandsvariable text ein, die jedes Mal aktualisiert wird, wenn jemand den Wert in die Texteingabe eingibt.

Gehen Sie zur Live-Demo auf CodeSandbox, wo dieser Code bereitgestellt wird. Wenn Sie die Konsole öffnen, sehen Sie jedes Mal, wenn wir etwas in das Feld eingeben, den Text neu gerendert an der Konsole ausgegeben.

die shouldComponentUpdate()-Methode

Es hilft zu verstehen, was unter der Haube vor sich geht und wie React feststellt, dass diese Komponente neu gerendert werden muss.

Jede Komponente hat eine shouldComponentUpdate()-Methode, die einen booleschen Wert zurückgibt. Wie der Name schon sagt, definiert diese Methode die Kriterien dafür, wann die Komponente erneut gerendert werden soll und wann nicht.

Standardmäßig sind die Kriterien wie folgt: Komponente wird aktualisiert, wenn sie neue props erhält oder wenn Sie Änderungen am Status vornehmen.

Standardmäßig ist die Methode shouldComponent() breit definiert. Immer wenn die aktuelle oder übergeordnete Komponente einen neuen prop-Wert oder state-Wert ändert, gibt sie true zurück.

Dadurch können Fehler und Verzögerungen bei der Anzeige signifikanter Änderungen vermieden werden, indem die Komponente übersprungen oder erneut gerendert wird.

Wenn Sie jedoch sicher sind, dass Sie den allgemeinen React-Richtlinien für die Arbeit mit Zustandswerten folgen können, z. B. sie nicht an Ort und Stelle zu mutieren, können Sie eine benutzerdefinierte shouldComponentUpdate()-Definition erstellen.