Detaillierte Erklärung der Verwendung von Status in den drei Hauptattributen von React

Daten werden an vielen Stellen in React benötigt, was in React als Status bezeichnet wird. Wir benötigen eine spezielle Methode zur Verwaltung des Status, daher wurden zustandsbezogene Methoden entwickelt. Für den Status müssen zwei grundlegende Funktionen erfüllt sein: Erstens kann er bestimmte Werte speichern, sodass er von React verwendet werden kann, und zweitens kann er von React überwacht und bei einer Änderung neu gerendert werden. Hier stellen wir vor, wie man Zustände in Klassen- bzw. Funktionskomponenten schreibt:

Klassenkomponente

Klasse ClassComponent erweitert React.Component{
    Konstruktor (Requisiten) {
        super(Requisiten)
    } //Optional render(){
        zurückkehren (
            //Hier können Sie jsx-Syntax schreiben)
    }
}

Wir verwenden im Allgemeinen setState, um den Status zu ändern. Wir können direkt ein zu änderndes Objekt oder eine Rückruffunktion übergeben. Beachten Sie, dass React bei der Übergabe eines Objekts nur eine oberflächliche Kopie und keine tiefe Kopie erstellt. Wenn also andere Objekte im Objekt geändert werden, kann React nicht wissen, wie es rendern soll. Diese Methode übergibt im Wesentlichen einen neuen Wert und überschreibt den ursprünglichen Wert. Wenn dieser Wert mit dem ursprünglichen Wert identisch ist, wird React nicht rendern.

Warum ist React so problematisch? Können wir den Wert nicht einfach direkt ändern? Denn in React gibt es ein Konzept namens Veränderlichkeit. React weiß durch die Statusänderungen in setState, was passiert ist, also rendert es. Wenn der Status direkt geändert wird, kann React dies nicht wahrnehmen und daher nicht rendern. Einfach ausgedrückt verfügt es nicht über eine bidirektionale Datenbindung wie Vue.

Der Konstruktor in der Klassenkomponente kann geschrieben werden oder nicht. Das Schreiben dieses Konstruktors hat zwei Hauptfunktionen:

• So weisen Sie this.state ein Objekt zu, um den Wert des internen Status zu initialisieren

Konstruktor (Requisiten) {
    super(Requisiten)
    dieser.Zustand = {n:12}
}

machen(){
    zurückkehren (
        <div>
                <h1>DIE ZEIT IST {this.state.n}</h1>
        </div>
    )
}

Beachten Sie, dass setState hier nicht geschrieben werden kann. Die obige Methode React kann auch extern festgelegt werden, d. h.

Zustand = {n:12}

machen(){
    zurückkehren (
        <div>
            <h1>DIE ZEIT IST {this.state.n}</h1>
        </div>
    )
}

• Binden einer Instanz an einen Event-Handler

Konstruktor (Requisiten) {
    super(Requisiten)
    dies.addNum = function(){fn()}.binden(dies)
}

machen(){
    zurückkehren (
        <button onClick={this.addNum}>+1</button>
    )
}

Diese Methode wurde jedoch in React durch eine neue Methode ersetzt. Der Code lautet wie folgt:

AddNum = ()=>{
    fn()
}

machen(){
    zurückkehren (
        <button onClick={this.addNum}>+1</button>
    )
}

Daher ist es nicht erforderlich, den obigen Konstruktor zu schreiben, um die Methode der übergeordneten Klasse zu erben.

Funktionale Komponenten

importiere { useState } von "react"
Funktion Funktionskomponente(){
    const [data,setData] = useState("der Anfangswert, den Sie übergeben möchten")
    zurückkehren (
        <div>DATEN ANZEIGEN {state}</div>
    )
}

Die Funktion von setData ähnelt hier setState, kann jedoch nur zum Ändern des Datenstatus verwendet werden, und wenn eine Änderung erforderlich ist, wird eine Rückruffunktion übergeben. Die Funktion verwendet als Argument den vorherigen Wert und gibt den zu ändernden Wert zurück. Der Kern dieser Methode besteht darin, ein neues Objekt zu übergeben, um den Wert des vorherigen React-Objekts zu ändern. Zu diesem Zweck können Sie den geänderten Wert auch einfach direkt schreiben. Standardmäßig entspricht er dem aktuellen Objekt und ändert dessen Wert. Die obige Methode ist viel einfacher als das ursprüngliche setState, aber das Problem besteht darin, dass Sie bei mehreren Daten useState mehrmals verwenden müssen und nicht mehrere Werte gleichzeitig übergeben können. In den meisten Fällen werden Datenverwaltungsprobleme jedoch von Redux verwaltet, sodass React selbst sich darum nicht kümmern muss.

Die Fallstricke von setState

Beim Ändern des Status einer React-Komponente besteht ein häufiges Problem in der Wertezusammenführung von setState. Schauen Sie sich die folgenden Fragen an:

diese.addNum = Funktion () {
            dies.setState({num:this.state.num+1})
            dies.setState({num:this.state.num+1})
            dies.setState({num:this.state.num+1})
        }.binden(dies)

Wenn zu diesem Zeitpunkt die Funktion addNum ausgelöst wird, wird num nur um 1 erhöht. Es wurden nicht 3 hinzugefügt, wie wir dachten. React selbst erklärt dies:

Der Aufruf von setState erfolgt asynchron. Erwarten Sie nicht, dass this.state nach dem Aufruf von setState sofort dem neuen Wert zugeordnet wird.

Die Erklärung hierfür lautet:

1. Unabhängig davon, wie oft Sie setState aufrufen, werden die Aktualisierungen nicht sofort durchgeführt. Speichern Sie stattdessen den zu aktualisierenden Status in „_pendingStateQuene“ und die zu aktualisierende Komponente in „dirtyComponent“.
2. Wenn die Stammkomponente ein Mounten ausführt, wird der Batch-Mechanismus auf „False“ aktualisiert. Nehmen Sie zu diesem Zeitpunkt den Status und die Komponenten in „_pendingStateQuene“ und „dirtyComponent“ heraus, führen Sie sie zusammen und aktualisieren Sie sie.

Einfach ausgedrückt: Wenn React ausgeführt wird, wird zur Verbesserung der Leistung der zu aktualisierende SetState in einem Array gespeichert. Wenn der synchrone Code von React selbst ausgeführt wird, wird vor der Aktualisierung der SetState im Array herausgenommen und dann gerendert. Da wir im obigen Code den synchronen Code this.setState({num:this.state.num+1}) zu setState hinzugefügt haben, erfolgt beim Herausnehmen der Stapelverarbeitung eine Zusammenführung, bei der viele setStates in einem Satz zusammengeführt werden und somit nur 1 geändert wird. Aufgrund dieses Mechanismus sieht setState wie asynchroner Code aus, wird aber tatsächlich synchron ausgeführt. Wenn wir zu diesem Zeitpunkt den vorherigen synchronen Code in asynchron ändern, erhalten wir das gewünschte Ergebnis.

diese.addNum = Funktion () {
            setTimeout(()=>{ dies.setState({num:this.state.num+1}) },0)
            setTimeout(()=>{ dies.setState({num:this.state.num+1}) },0)
            setTimeout(()=>{ dies.setState({num:this.state.num+1}) },0)
        }.binden(dies)

An dieser Stelle wird der Wert direkt um 3 erhöht, da der asynchrone Code während der Codeausführung zwischengespeichert wird. Es wird ausgeführt, nachdem alle synchronen Codes ausgeführt wurden. Zu diesem Zeitpunkt ist der Stapelverarbeitungsmechanismus beendet, sodass alle drei Funktionen ausgeführt werden und 3 hinzugefügt wird. Das ist, was mir bisher einfällt. Wenn es in Zukunft neue gibt, werden sie hinzugefügt.

Oben finden Sie den ausführlichen Inhalt der detaillierten Erklärung zur Verwendung von Status, einem der drei Hauptattribute von React. Weitere Informationen zum Status, einem der drei Hauptattribute von React, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!