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

Erfahren Sie mehr über den Hyperlink A-Tag

fragen: Ich habe den Hyperlink mit CSS formatiert...

Verwendung der JavaScript-Sleep-Funktion

Inhaltsverzeichnis 1. Schlaffunktion 2. setTimeou...

Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern

In diesem Artikel wird ein Nachrichtenfeld mit Sp...

MySQL 20-Designprinzipien für Hochleistungsarchitekturen (es lohnt sich, sie zu sammeln)

Designprinzipien für die Open-Source-Datenbankarc...

Führen Sie die folgenden Schritte aus, um die Anmeldung durch Gesichtserkennung in Ubuntu zu implementieren

1. Installieren Sie Howdy: Howdy-Projektadresse s...

So führen Sie Hadoop aus und erstellen Images in Docker

Wir erfinden das Rad neu: Hier verwenden wir Neuv...

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Dieser Artikel stellt vor, wie Sie IP-Adressdaten...

Beispielanalyse für MySQL Oracle- und SQL Server-Paging-Abfragen

Ich habe vor Kurzem eine einfache Studie zur Date...

Wie installiert und verbindet man Navicat in MySQL 8.0.20 und worauf muss man achten?

Dinge zu beachten 1. Zunächst müssen Sie im MySQL...

Wie löst Vue das domänenübergreifende Problem des Axios-Request-Frontends?

Inhaltsverzeichnis Vorwort 1. Warum treten domäne...

Beispiel für die Verwendung von UserMap in IMG

usemap ist ein Attribut des <img>-Tags, das ...

Der Unterschied zwischen useEffect und useLayoutEffect in React

Inhaltsverzeichnis Voraussetzungen Effekt verwend...

JavaScript Voranalyse, Objektdetails

Inhaltsverzeichnis 1. Voranalyse 1. Vorabanalyse ...

JavaScript verwendet Canvas zum Zeichnen von Koordinaten und Linien

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

Canonical ermöglicht Linux-Desktop-Apps mit Flutter (empfohlen)

Das Ziel von Google mit Flutter bestand immer dar...