Asynchrones Verhalten der setState-Methode in React

Das Erstellen dynamischer Anwendungen ist unmöglich oder zumindest sehr schwierig, ohne einen Zustand beizubehalten. Glücklicherweise kann jede Komponente in der React-Bibliothek ihren eigenen internen Zustand haben.

Unerfahrene React-Entwickler verstehen oft das komplizierte Verhalten von state-Objekten in React nicht. In diesem Artikel wollen wir einige Verwirrungen beseitigen.

Asynchrones Verhalten der setState()-Methode in React

Viele React-Entwickler wissen nicht, dass die Methode setState() asynchron ist. Wenn Ihre Anwendung mehrere Aufrufe der setState()-Methode hat, werden sie gestapelt, um die Leistung und Geschwindigkeit der Anwendung zu verbessern.

Das React-Team hat die Methode setState() asynchron gemacht, da eine Änderung des Status ein Auslöser für das erneute Rendern der Anwendung sein kann. Dies kann zu Fehlern und fehlender Reaktion führen, wenn eine Komponente mehrere separate Aufrufe der Methode setState() hat.

Übergeben Sie die Callback-Funktion als Argument an die setState()-Methode

In React wird die Methode setState() verwendet, um das Zustandsobjekt zu aktualisieren. Viele React-Entwickler wissen nicht, dass es mehr als ein Argument akzeptieren kann.

Das erste Argument ist immer das Objekt, das wir im neuen Zustand haben wollen. Das zweite Argument kann jedoch die Callback-Funktion sein, die direkt nach der Statusaktualisierung ausgeführt wird.

Schauen wir uns ein Beispiel an:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: "black" };
  }
  render() {
    return (
      <button
        onClick={() =>
          this.setState({ color: "red" }, () => {
            console.log("callback called");
          })
        }
      >
        Update the color
      </button>
    );
  }
}

Der Wert des Eventhandlers onClick ist ein Aufruf dieser Methode. In diesem Fall ist das erste Argument ein Objekt, das den bestehenden Zustand ersetzt.

Im zweiten Argument wird die Callback-Funktion direkt nach dem Aktualisieren des Status ausgeführt.

Sie können zu dieser Live-CodeSandbox-Demo gehen. Wenn Sie die Konsole öffnen, werden Sie sehen, dass durch Klicken auf die Schaltfläche eine Zeichenfolge “‘Rückruf aufgerufen’” an die Konsole ausgegeben wird.

Diese Funktion ist hilfreich, wenn Sie direkt nach dem Aktualisieren des Status eine bestimmte Aktion ausführen möchten. Technisch gesehen können Sie mehrere Aufrufe an die Methode setState() verketten, um mehrere Eigenschaften des Objektzustands gleichzeitig zu aktualisieren; Es gibt jedoch bessere Möglichkeiten, dies zu tun.

Wenn Sie außerdem sicherstellen möchten, dass eine Statuseigenschaft nach der anderen aktualisiert wird, können Sie Folgendes tun:

this.setState({color: 'red'}, () => setState{color: 'red', active: true})

In diesem Fall ersetzt React zuerst das aktuelle Zustandsobjekt durch das Objekt, das das erste Argument ist ({color: "red"}). Sobald diese Operation abgeschlossen ist, führt sie die Rückruffunktion aus und fügt dem Status eine weitere Eigenschaft hinzu.

Aktualisieren Sie mehrere Zustandseigenschaften auf einmal

Wenn Sie mehrere Zustandseigenschaften gleichzeitig aktualisieren müssen, können Sie dies in einem Aufruf der Methode setState() tun.

Aus dem vorherigen Beispiel ist es einfacher, den Wert der Zustandseigenschaft color zu aktualisieren und die Zustandseigenschaft active in einem einzigen setState()-Aufruf hinzuzufügen:

this.setState({color: 'red', active: true})