Detaillierte Erklärung der Abkürzung von State in React

Vorwort

Was ist Staat

Wir alle sagen, dass React eine Zustandsmaschine ist. Wie spiegelt sich das wider? Es spiegelt sich im Zustand wider. Durch die Interaktion mit dem Benutzer werden verschiedene Zustände realisiert und dann die Benutzeroberfläche gerendert, sodass die Daten und die Benutzeroberfläche des Benutzers konsistent bleiben. Der Status ist eine private Eigenschaft einer Komponente.

In React führt das Aktualisieren des Status einer Komponente dazu, dass die Benutzeroberfläche neu gerendert wird (ohne das DOM zu manipulieren). Mit anderen Worten: Die Benutzeroberfläche ändert sich, wenn sich der Status ändert.

PS: Der Status kann nur in dieser Komponente initialisiert werden, und der Status kann nur von dieser Komponente geändert und abgefragt werden. Er kann nicht extern abgefragt und geändert werden. Man kann also auch sagen, dass der Status für die Komponente privat ist.

Hier ist eine Kurzform zum Schreiben des Status von React.

Der Status wird zur Initialisierung in React verwendet. this.state sollte als private Eigenschaft einer Komponente betrachtet werden. Es gibt zwei Möglichkeiten, unseren Reaktionsstatus zu schreiben. Eine davon ist der Konstruktor, den wir auf der offiziellen Website gesehen haben.

 Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      Wert: null,
    };
  }

Aber wenn Sie den Status in einer Klassenkomponente verwenden, erbt die Klasse React.Component

Klasse App erweitert React.Component {
         //Der Status, den wir hier definieren, ist derselbe wie bei der obigen Methode // ​​Sie können die Zuweisungsanweisung state={aff:1} direkt in die Klasse schreiben
 
             machen(){  
                 konsole.log(dies);
                 //Dies erbt React.Component
                 // Dies ist hier das Instanzobjekt der aktuellen Komponente return (
                     <div>
                       123
                     </div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,
           document.getElementById('app')
       )

Ich glaube, jeder möchte sehen, was hier gedruckt wird. Bitte schauen Sie nach unten.

Dies ist das Ergebnis des Ausdrucks in unserem verkürzten Zustand. Sehen wir uns das Ergebnis des Ausdrucks auf unserer offiziellen Website an.

 Klasse App erweitert React.Component {
        Konstruktor(Requisiten) {
            super(Requisiten)
            konsole.log(dies,11);
           // Dies ist unsere normale Methode zum Initialisieren des Status this.state={
                Nummer: 456
            }
        }
             machen(){  
                 zurückkehren (
                     <div>
                       123
                     </div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,
           document.getElementById('app')
       )

Die Druckergebnisse sind bei beiden Varianten gleich.

Status: Zusammenfassung

Der Status ist die wichtigste Eigenschaft eines Komponentenobjekts. Der Wert ist ein Objekt (das mehrere Schlüssel-Wert-Kombinationen enthalten kann).

Dies ist das Ende dieses Artikels über die Abkürzung des React-Status. Weitere relevante Inhalte zum React-Status finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!