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

Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign

<br />In Gästebüchern, Foren und anderen Ort...

Detaillierte Erklärung der grep- und egrep-Befehle in Linux

Vertreter / egrep Syntax: grep [-cinvABC] 'wo...

Einige nützliche Methoden zur Meta-Einstellung (unbedingt lesen)

<meta name="viewport" content="...

Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration

Tutorial zur npm-Installation: 1. Laden Sie das N...

Verwendung von Vue-Filtern und Probleme bei der Zeitstempelkonvertierung

Inhaltsverzeichnis 1. Das Konzept schnell erkenne...

Warum wird mir die Zugriffsschnittstelle für Docker Tomcat nicht angezeigt?

Frage: Kann der Ursprungsserver keine Darstellung...

SQL-Funktion zum Zusammenführen eines Feldes

Vor kurzem musste ich alle Felder einer verknüpft...

Verwenden Sie den Befehl sed, um die kv-Konfigurationsdatei in Linux zu ändern

sed ist ein Zeichenstromeditor unter Unix, also e...

JavaScript zum Erzielen eines Texterweiterungs- und -reduzierungseffekts

Die Implementierung des Erweiterns und Reduzieren...

WEB Standard-Webseitenstruktur

Ob es sich nun um das Hintergrundbild oder die Tex...

Detaillierte Erläuterung des Prozesses der Verwendung von GPU in Docker

Inhaltsverzeichnis tf-gpu herunterladen Erstellen...

Farbverlauf für HTML-Hintergrund durch CSS erreicht

Screenshots der Effekte: Implementierungscode: Cod...

CSS-Stil zurücksetzen und löschen (damit verschiedene Browser den gleichen Effekt anzeigen)

Damit die Seitenanzeige in verschiedenen Browsern ...

JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts

Inhaltsverzeichnis 1. Hintergrund zur Umsetzung 2...

So überprüfen Sie, ob MySQL erfolgreich installiert wurde

Nachdem MySQL installiert wurde, können Sie in ei...