Verständnis Reagieren `setState`

0
45

Reagieren die Komponenten können, und oft tun, haben Stand. Staat kann alles sein, aber denken Sie an Dinge wie, ob ein Benutzer angemeldet ist oder nicht und der Anzeige der richtigen Benutzername basiert auf dem account aktiv ist. Oder ein array von blog-posts. Oder wenn ein modales geöffnet ist oder nicht, und die Registerkarte innerhalb es aktiv ist.

Reagieren Komponenten mit modernster render UI basierend auf diesen Staat. Wenn der Zustand der Komponenten verändert werden, so übernimmt die Komponente UI.

Das macht das Verständnis, Wann und wie ändern Sie den Zustand der Komponente wichtig. Am Ende dieses Tutorials sollten Sie wissen, wie setState funktioniert, und ist in der Lage, Häufig vorkommende fallen zu vermeiden, die viele von uns treffen, wenn beim lernen Reagieren.

Funktionsweise von ” setState()`

setState() ist die einzige legitime Art und Weise zu aktualisieren, Zustand nach der Initialen Zustand setup. Sagen wir, wir haben eine search-Komponente und wollen, um den Suchbegriff eines Benutzers.

Hier ist das setup:

importieren Reagieren, { Component } von ‘reagieren’

class Suche extends Component {
Konstruktor(props) {
super(Requisiten)

state = {
Suchbegriff:”
}
}
}

Wir sind die übergabe eines leeren string als Wert und zu aktualisieren den Status der Suchbegriff ist, haben wir zu nennen setState().

setState({ Suchbegriff: event.Ziel.Wert })

Hier sind wir übergabe eines Objekts zu setState(). Das Objekt enthält den Teil des Staates, wie wir wollen, Sie zu aktualisieren, die in diesem Fall, ist der Wert von diesen Suchbegriff eingeben. Reagieren, nimmt dieser Wert ab und führt es in das Objekt, das Sie braucht. Es ist irgendwie wie die Search-Komponente fragt, was Sie verwenden sollten für den Wert von Suchbegriff und setState() antwortet mit einer Antwort.

Dies ist im Grunde, kicking off ein Prozess, Reagieren, fordert Versöhnung. Der Versöhnungsprozess ist die Art und Weise Reagieren, aktualisiert die DOM -, durch änderungen an der Komponente basierend auf der änderung in Zustand. Wenn der Wunsch zu setState() wird ausgelöst, zu Reagieren, schafft eine neue Struktur mit der reaktiven Elemente in der Komponente (zusammen mit der aktualisierten Zustand). Dieser Baum wird verwendet, um herauszufinden, wie man die Search-Komponente die UI sollte sich ändern, in Reaktion auf die Zustandsänderung durch den Vergleich mit den Elementen des vorherigen Baumes. Reagieren kennt die änderungen zu implementieren, und aktualisiert nur die Teile des DOM, wo nötig. Dies ist der Grund, warum Reagieren schnell.

Das klingt wie eine Menge, aber in der Summe der flow:

  • Wir haben eine search-Komponente zeigt, dass ein Suchbegriff
  • Dass die Suche Begriff ist derzeit leer
  • Gibt der Nutzer einen Suchbegriff
  • Dieser Begriff wird erfasst und gespeichert, die von setState als Wert
  • Die Versöhnung stattfindet und Reagieren bemerkt die änderung in dem Wert
  • Reagieren, weist die search-Komponente um den Wert zu aktualisieren und den such-Begriff zusammengeführt werden

Der Versöhnungsprozess nicht unbedingt ändern den gesamten Baum, außer in einer situation, wo die Wurzel des Baums ist wie folgt verändern:

// alte
<div>
<Search />
</div>

// neue
<span>
<Search />
</span>

Alle <div> tags werden <span> – tags und die gesamte Komponente Baum wird aktualisiert, sobald ein Ergebnis.

Die Faustregel ist, niemals mutieren Staat direkt. Verwenden Sie immer setState() zum ändern des Status. Ändern der Staat direkt, wie das snippet unten nicht dazu, dass die Komponente neu Rendern.

// nicht
diese.state = {
Suchbegriff: event.Ziel.Wert
}

Übergeben Sie eine Funktion `setState()`

Um zu demonstrieren, diese Idee weiter, lassen Sie uns einen einfachen Zähler, der inkrementiert und dekrementiert Sie auf klicken Sie auf.

Finden Sie den Stift setState-Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Lassen Sie uns registrieren Sie die Komponente und definieren Sie den markup-Code für das UI:

Klasse App erweitert Reagieren.Komponente {

state = { count: 0 }

handleIncrement = () => {
diese.setState({ count: dies.Zustand.count + 1 })
}

handleDecrement = () => {
diese.setState({ count: dies.Zustand.count – 1 })
}
render() {
return (
<div>
<div>
{dies.Zustand.Zählung}
</div>
<button onClick={das.handleIncrement}>Increment by 1</button>
<button onClick={das.handleDecrement}>Dekrementieren um 1</button>
</div>
)
}
}

An diesem Punkt, wird der Zähler einfach inkrementiert oder dekrementiert den Wert der Zählung um 1 bei jedem Klick.

Aber was, wenn wir wollten, die zum Inkrementieren oder Dekrementieren von 3 statt? Wir könnten versuchen, es zu nennen setState() drei mal in der handleDecrement und handleIncrement Funktionen wie diese:

handleIncrement = () => {
diese.setState({ count: dies.Zustand.count + 1 })
diese.setState({ count: dies.Zustand.count + 1 })
diese.setState({ count: dies.Zustand.count + 1 })
}

handleDecrement = () => {
diese.setState({ count: dies.Zustand.count – 1 })
diese.setState({ count: dies.Zustand.count – 1 })
diese.setState({ count: dies.Zustand.count – 1 })
}

Wenn Sie zu Hause mitcodieren, Sie werden überrascht sein zu finden , die nicht funktioniert.

Der obige code-snippet ist äquivalent zu:

Objekt.assign(
{},
{ count: dies.Zustand.count + 1 },
{ count: dies.Zustand.count + 1 },
{ count: dies.Zustand.count + 1 },
)

Objekt.assign() wird verwendet, um das kopieren von Daten von einem Quellobjekt zu einem Zielobjekt. Wenn die Daten kopiert von der Quelle in das Ziel-alle haben die gleichen Schlüssel, wie in unserem Beispiel, das Letzte Objekt gewinnt. Hier ist eine einfachere version, wie Objekt.assign() funktioniert;

let count = 3

const-Objekt = Objekt.assign({},
{count: count + 1},
{count: count + 2},
{count: count + 3}
);

console.log(object);
// Ausgabe: Object { count: 6 }

Also statt der Aufruf geschieht drei mal, es passiert nur einmal. Dies kann behoben werden, indem eine Funktion setState(). Genauso, wie Sie-Objekte übergeben, um setState () können Sie so auch Funktionen übergeben, und das ist der Weg aus der situation vor.

Wenn wir Bearbeiten die handleIncrement Funktion wie folgt Aussehen:

handleIncrement = () => {
diese.setState((prevState) => ({ count: prevState.count + 1 }))
diese.setState((prevState) => ({ count: prevState.count + 1 }))
diese.setState((prevState) => ({ count: prevState.count + 1 }))
}

…wir können nun die Inkrement-Zählung dreimal mit einem Klick.

In diesem Fall, anstelle der Zusammenführung, Reagieren die Warteschlangen-Funktion ruft in der Reihenfolge, wie Sie gemacht werden und eine Aktualisierung der gesamten Staat diejenigen, die es gemacht wird. Dies aktualisiert den Zustand der bis 3 zählen statt 1.

Access Vorherigen Zustand Mit Updater

Wenn Gebäude Reagieren Anwendungen, es gibt Zeiten, wenn Sie wollen, um zu berechnen, Staat basiert die Komponente, die den vorherigen Zustand. Man kann nicht immer Vertrauen.Zustand zu halten, den richtigen Zustand sofort nach dem Aufruf von ” setState(), da ist es immer gleich der Staat auf dem Bildschirm gerendert.

Gehen wir zurück zu unserem Gegenbeispiel, um zu sehen, wie das funktioniert. Sagen wir, wir haben eine Funktion, verringert unsere Zählung durch 1. Diese Funktion sieht wie folgt aus:

changeCount = () => {
diese.setState({ count: dies.Zustand.count – 1})
}

Was wir wollen ist die Möglichkeit zu verringern, indem Sie 3. Die changeCount () – Funktion aufgerufen wird drei mal in einer Funktion für die Verarbeitung des click-Ereignisses, wie diese.

handleDecrement = () => {
diese.changeCount()
diese.changeCount()
diese.changeCount()
}

Jedes mal, wenn die Taste zum verringern geklickt wird, wird der Zähler Dekrementieren um 1 statt 3. Dies ist, weil die dieser.Zustand.count wird nicht aktualisiert, bis die Komponente wurde neu gerendert. Die Lösung ist die Verwendung ein updater. Ein updater erlaubt Ihnen Zugriff auf den aktuellen Stand und legte es zu benutzen sofort zu aktualisieren andere Gegenstände. Also die changeCount () – Funktion wird wie folgt Aussehen.

changeCount = () => {
diese.setState((prevState) => {
return { count: prevState.count – 1}
})
}

Jetzt sind wir nicht abhängig vom Ergebnis.Zustand. Die Staaten zählen, basieren auf einander, so sind wir in der Lage, um auf die korrekte Zustand die ändert sich mit jedem Aufruf changeCount().

setState() behandelt werden sollten asynchron — in anderen Worten, nicht immer erwarten, dass der Staat hat sich verändert nach dem Aufruf von ” setState().

Zusammenfassung

Bei der Arbeit mit setState(), dies sind die wichtigsten Dinge, die Sie wissen sollten:

  • Update einer Komponente Zustand getan werden sollte, mit setState()
  • Sie können übergeben Sie ein Objekt oder eine Funktion setState()
  • Übergeben Sie eine Funktion aus, wenn Sie können, um update-Zustand mehrere Male
  • Verlassen Sie sich nicht auf diese.Zustand unmittelbar nach dem Aufruf von “setState ()” und nutzen Sie die updater-Funktion statt.