Eine kurze Analyse des Zustandsverständnisses von React

Eine kurze Analyse des Zustandsverständnisses von React

Wie definiert man komplexe Komponenten (Klassenkomponenten) und einfache Komponenten (Funktionskomponenten)?

  • Ob es einen Staat gibt

Dies wirft die Frage auf: Was ist Staat?

Beispielsweise habe ich heute die Prüfung nicht bestanden, weil meine Verfassung nicht gut war und sich meine Verfassung auf mein Verhalten ausgewirkt hat.
Der Status in der Komponente steuert die Seitenaktualisierung. Mit anderen Worten: Der Komponentenstatus speichert Daten und Änderungen in den Daten steuern die Seitenaktualisierung.

Bildbeschreibung hier einfügen

Was wir hier verstehen müssen ist: Wessen Staat ist das? Der Status ist der Status des Komponenteninstanzobjekts, nicht der Komponentenklasse selbst, sondern der von dieser Klasse erstellten Instanz.

(Klasse) Eines der drei Hauptattribute der Komponenteninstanz: Status

Inhalt anzeigen

Bildbeschreibung hier einfügen

Realisieren Sie eine Anforderung, indem Sie auf die Seite klicken, Hot / Cool-Schalter

Bildbeschreibung hier einfügen
Bildbeschreibung hier einfügen

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-kompatibel" content="IE=edge" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <Titel>Reagieren</Titel>
  </Kopf>
  <Text>
    <div id="test"></div>
    <!-- Kernbibliothek importieren-->
    <script src="../js/react.development.js"></script>
    <!-- Erweiterungsbibliothek -->
    <script src="../js/react-dom.development.js"></script>
    <!-- Konvertieren Sie jsx in js -->
    <script src="../js/babel.min.js"></script>
    <Skripttyp="text/babel">
      // 1. Erstellen Sie die Komponentenklasse Weather extends React.Component {
        /**
         * Welche Daten im Konstruktor empfangen werden können, hängt davon ab, welche Daten beim Aufruf von new übergeben werden. * New Weather wird nicht von uns, sondern von react betrieben. */
        Konstruktor(Requisiten) {
          // Ich habe Props noch nicht gelernt, aber ich muss sie verwenden. Ich werde die offizielle Website imitieren, um // die Klassensyntax super(props); zu schreiben.
          // Im Konstruktor zeigt dies auf das Konstruktor-Instanzobjekt // Vor 16.8 ist der Status {} und nach 16.8 ist er null
          dieser.Zustand = {
            isHot: wahr,
          };
        }
        rendern() {
          console.log("dies:", dies);
          return <h1>Es ist heute sehr heiß</h1>;
        }
      }
      // 2. Komponenten auf der Seite rendern ReactDOM.render(<Weather />, document.getElementById("test"));
    </Skript>
  </body>
</html>

Bildbeschreibung hier einfügen

Daten initialisieren

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-kompatibel" content="IE=edge" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <Titel>Reagieren</Titel>
  </Kopf>
  <Text>
    <div id="test"></div>
    <!-- Kernbibliothek importieren-->
    <script src="../js/react.development.js"></script>
    <!-- Erweiterungsbibliothek -->
    <script src="../js/react-dom.development.js"></script>
    <!-- Konvertieren Sie jsx in js -->
    <script src="../js/babel.min.js"></script>
    <Skripttyp="text/babel">
      // 1. Erstellen Sie die Komponentenklasse Weather extends React.Component {
        /**
         * Welche Daten im Konstruktor empfangen werden können, hängt davon ab, welche Daten beim Aufruf von new übergeben werden. * New Weather wird nicht von uns, sondern von react betrieben. */
        Konstruktor(Requisiten) {
          // Ich habe Props noch nicht gelernt, aber ich muss sie verwenden. Ich werde die offizielle Website nachahmen, um sie zu schreiben, sonst funktioniert es nicht. // Klassensyntax super(props);
          // Im Konstruktor zeigt dies auf das Konstruktor-Instanzobjekt // Vor 16.8 ist der Status {} und nach 16.8 ist er null
          dieser.Zustand = {
            isHot: wahr,
          };
        }
        // Status ist auf dem Wetter-Instanzobjekt render() {
          console.log("dies:", dies);
          return <h1>Das heutige Wetter ist sehr {this.state.isHot ? "hot" : "cool"}</h1>;
        }
      }
      // 2. Komponenten auf der Seite rendern ReactDOM.render(<Weather />, document.getElementById("test"));
    </Skript>
  </body>
</html>

Bildbeschreibung hier einfügen

Schreiben Sie als Nächstes das Klickereignis. Beachten Sie, dass wir zuerst eine Fehlerdemonstration durchführen.

 <Skripttyp="text/babel">
      // 1. Erstellen Sie die Komponentenklasse Weather extends React.Component {
        /**
         * Welche Daten im Konstruktor empfangen werden können, hängt davon ab, welche Daten beim Aufruf von new übergeben werden. * New Weather wird nicht von uns, sondern von react betrieben. */
        Konstruktor(Requisiten) {
          // Ich habe Props noch nicht gelernt, aber ich muss sie verwenden. Ich werde die offizielle Website imitieren, um // die Klassensyntax super(props); zu schreiben.
          // Im Konstruktor zeigt dies auf das Konstruktor-Instanzobjekt // Vor 16.8 ist der Status {} und nach 16.8 ist er null
          dieser.Zustand = {
            isHot: wahr,
          };
        }

        // Status ist auf dem Wetter-Instanzobjekt render() {
          console.log("dies:", dies);
          zurückkehren (
            <h1 beiKlick={demo()}>
              Das heutige Wetter ist {this.state.isHot ? "hot" : "cool"}
            </h1>
          );
        }
      }
      Funktion demo() {
        console.log("Demo wird aufgerufen");
      }
      // 2. Komponenten auf der Seite rendern ReactDOM.render(<Weather />, document.getElementById("test"));
    </Skript>

Wenn ich das Klickereignis aufrufe, schreibe ich onClick={demo()}
In der Konsole werden Sie feststellen, dass die Funktion sofort ausgeführt wird.

Bildbeschreibung hier einfügen

Wenn React die Rendermethode über die Instanz in „new Weather“ aufruft und Sie den Rückgabewert erhalten möchten, müssen Sie <h1 onClick={demo()}>Today's weather is very {this.state.isHot ? "热" : "凉"}</h1> ausführen. Wenn die Zuweisungsanweisung onClick ausgeführt wird , wird der Rückgabewert des Funktionsaufrufs demo() als Rückruf an onClick übergeben. Der Rückgabewert von demo() ist undifend, d. h. undifend wird als Rückruf an onClick übergeben. Dies ist ein falscher Ansatz, da das Hinzufügen von () nach demo zu einem Funktionsaufruf führt. **Wenn der Klick erfolgt, wird „Undifend“ aufgerufen und React übernimmt diesen Vorgang. Wenn „Undifend“ aufgerufen wird, gibt es keine weiteren Aktionen.

Häufige Schreibfehler

  rendern() {
          console.log("dies:", dies);
          zurückkehren (
            <h1 onClick='demo()'>Das heutige Wetter ist {this.state.isHot ? "hot" : "cool"}</h1>
          );
        }

Bildbeschreibung hier einfügen

 rendern() {
          console.log("dies:", dies);
          zurückkehren (
            <h1 onclick='demo'>Das heutige Wetter ist {this.state.isHot ? "hot" : "cool"}</h1>
          );
        }

Bildbeschreibung hier einfügen

Richtiges Schreiben

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-kompatibel" content="IE=edge" />
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
    <Titel>Reagieren</Titel>
  </Kopf>
  <Text>
    <div id="test"></div>
    <!-- Kernbibliothek importieren-->
    <script src="../js/react.development.js"></script>
    <!-- Erweiterungsbibliothek -->
    <script src="../js/react-dom.development.js"></script>
    <!-- Konvertieren Sie jsx in js -->
    <script src="../js/babel.min.js"></script>
    <Skripttyp="text/babel">
      // 1. Erstellen Sie die Komponentenklasse Weather extends React.Component {
        /**
         * Welche Daten im Konstruktor empfangen werden können, hängt davon ab, welche Daten beim Aufruf von new übergeben werden. * New Weather wird nicht von uns, sondern von react betrieben. */
        Konstruktor(Requisiten) {
          // Ich habe Props noch nicht gelernt, aber ich muss sie verwenden. Ich werde die offizielle Website imitieren, um // die Klassensyntax super(props); zu schreiben.
          // Im Konstruktor zeigt dies auf das Konstruktor-Instanzobjekt // Vor 16.8 ist der Status {} und nach 16.8 ist er null
          dieser.Zustand = {
            isHot: wahr,
          };
        }

        // Status ist auf dem Wetter-Instanzobjekt render() {
          console.log("dies:", dies);
          zurückkehren (
            <h1 onClick={demo}>
              Das heutige Wetter ist {this.state.isHot ? "hot" : "cool"}
            </h1>
          );
        }
      }
      Funktion demo() {
        console.log("Demo wird aufgerufen");
      }
      // 2. Komponenten auf der Seite rendern ReactDOM.render(<Weather />, document.getElementById("test"));
    </Skript>
  </body>
</html>

Bildbeschreibung hier einfügen

Überarbeiten

Die Daten wurden auf der obigen Seite gerendert und jetzt möchten wir die Daten auf der Seite ändern. Wenn Sie die Daten ändern möchten, müssen Sie zuerst isHot im Status abrufen. Sehen wir uns eine falsche Schreibweise an:

 Funktion demo() {
        console.log("Demo wird aufgerufen");
        // Fehlerdemonstration const { isHot } = this.state;
        console.log("istHeiß", istHeiß);
      }

Bildbeschreibung hier einfügen

Die Eingabeaufforderung lautet xxx of undefined (mit der Aufschrift „state“), was „Status von undefined“ bedeutet. Wenn xxx undefiniert ist, meldet undefined.state diesen Fehler. Das xxx bezieht sich hier darauf.
Drucken wir das aus

  Funktion demo() {
        // Fehlerdemonstration console.log("this", this);
        const { isHot } = dieser.Zustand;
        console.log("istHeiß", istHeiß);
      }

Bildbeschreibung hier einfügen

Werfen wir einen Blick auf die Codestruktur und Kommentare

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

Durch Drucken wird festgestellt, dass die Daten korrekt angezeigt werden können, wenn die benutzerdefinierte Funktion außerhalb der Klasse platziert wird, die Daten im Status jedoch nicht abgerufen/geändert werden können.

  Klasse Wetter erweitert React.Component {
        /**
         * Welche Daten im Konstruktor empfangen werden können, hängt davon ab, welche Daten beim Aufruf von new übergeben werden. * New Weather wird nicht von uns, sondern von react betrieben. */
        Konstruktor(Requisiten) {
          // Ich habe Props noch nicht gelernt, aber ich muss sie verwenden. Ich werde die offizielle Website imitieren, um // die Klassensyntax super(props); zu schreiben.
          /**
           * Im Konstruktor zeigt dies auf das Konstruktor-Instanzobjekt. * Vor 16.8 ist der Status {} und nach 16.8 ist er null
           * Status befindet sich im Instanzobjekt von Wetter */
          dieser.Zustand = {
            isHot: wahr,
          };
        }
        // Wetter wechseln demo() {
          console.log("dies", dies);
          const { isHot } = dieser.Zustand;
          console.log("istHeiß", istHeiß);
        }
        // Rendern render() {
          console.log("dies:", dies);
          zurückkehren (
            <h1 onClick={demo}>
              Das heutige Wetter ist {this.state.isHot ? "hot" : "cool"}
            </h1>
          );
        }
      }

Beachten Sie, dass eine Klasse kein Funktionskörper ist. Sie müssen daher keine Funktion schreiben

Damit ist dieser Artikel mit einer kurzen Analyse des Zustandsverständnisses von React abgeschlossen. Weitere Informationen zum Zustandsverständnis von React finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Tiefgreifendes Verständnis der React State-Prinzipien
  • Detaillierte Erklärung der Abkürzung von State in React
  • Detaillierte Erklärung von react setState
  • Detaillierte Untersuchung des setState-Quellcodes in React
  • Tiefgreifendes Verständnis des Arbeitsmechanismus von Reacts setState
  • Wie gut kennen Sie sich mit State und setState() in React-Komponenten aus?

<<:  Detaillierte Schritte zum Installieren und Deinstallieren des Apache-Dienstes (httpd) unter CentOS 7

>>:  Beispiel zur Erläuterung der Größe einer MySQL-Statistiktabelle

Artikel empfehlen

Vue3 + el-table realisiert Zeilen- und Spaltenkonvertierung

Inhaltsverzeichnis Zeilen-Spalten-Konvertierung A...

Vue führt eine Überprüfung durch, ob der Benutzername verfügbar ist

In diesem Artikelbeispiel wird der spezifische Co...

Warum ist der Speicherplatz nach dem Löschen von Tabellendaten in MySQL immer noch belegt?

Inhaltsverzeichnis 1. MySQL-Datenstruktur 2. Die ...

Zusammenfassung der grundlegenden Kenntnisse zur MySql-Datenbank

Inhaltsverzeichnis Grundlegende Datenbankvorgänge...

Vue nutzt Amap zur Realisierung der Stadtpositionierung

In diesem Artikel wird der spezifische Code von V...

Einführung in die Cloud-native-Technologie Kubernetes (K8S)

Inhaltsverzeichnis 01 Was ist Kubernetes? 02 Der ...

Detaillierte Erklärung zum Übergeben von Werten zwischen React-Hook-Komponenten (mithilfe von ts)

Inhaltsverzeichnis Vom Vater zum Sohn Vom Sohn zu...

Detaillierte Erläuterung der Nginx-Anti-Hotlink- und Anti-Crawler-Konfiguration

Erstellen Sie eine neue Konfigurationsdatei (gehe...

Die Vorteile von Div+CSS und Web-Standardseiten

Das Div-Element wird verwendet, um Struktur und Hi...

Verwenden Sie CSS, um 3D-konvexe und konkave Effekte auf Bildern zu erzielen (konvex aus dem Rahmen heraus oder konkav im Rahmen).

Ⅰ. Problembeschreibung: Verwenden Sie CSS, um kon...

So gestalten Sie das Frontend einer Website elegant und attraktiv für Benutzer

Das Temperament einer Web-Frontend-Website ist ein...

Definition und Funktion des zoom:1-Attributs in CSS

Heute wurde ich gefragt, wozu das Zoom-Attribut i...

So kapseln Sie Timerkomponenten in Vue3

Hintergrund Wenn Sie auf manchen Webseiten von Ei...

CSS Sticky Footer Mehrere Implementierungen

Was ist „Sticky Footer“ Der sogenannte „Sticky Fo...

ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse

Inhaltsverzeichnis 1. So führen Sie stapelweise U...