ReactJS: Löst „setState' immer ein vollständiges erneutes Rendern aus?

ReactJS: Wird „render“ jedes Mal ausgelöst, wenn „setState“ aufgerufen wird?

React ist darauf ausgelegt, Komponenten nur dann effizient neu zu rendern, wenn notwendig. Dieses Verhalten ist jedoch möglicherweise nicht immer offensichtlich, was zu Fragen zur Beziehung zwischen „setState“ und Rendering führt.

Standard-Rendering-Verhalten

Standardmäßig wird „setState“ aufgerufen „ löst ein vollständiges erneutes Rendern der Komponente und aller ihrer untergeordneten Komponenten aus. Dadurch wird sichergestellt, dass alle Statusänderungen genau in der Benutzeroberfläche widergespiegelt werden.

Dieses Verhalten ist darauf zurückzuführen, dass „shouldComponentUpdate“ standardmäßig immer „true“ zurückgibt. Diese Methode bestimmt, ob eine Komponente ihre Renderausgabe basierend auf Änderungen an Requisiten oder Status aktualisieren soll.

Zweck von Render

Auch wenn „render“ jedes Mal aufgerufen wird „ setState“ aufgerufen wird, aktualisiert React das DOM nicht sofort. Stattdessen wird ein virtuelles DOM generiert, das den gewünschten Zustand der Benutzeroberfläche darstellt. Das tatsächliche DOM wird nur geändert, wenn es Änderungen zwischen dem alten und dem neuen virtuellen DOM gibt.

Beispiel

Beachten Sie den in der Frage bereitgestellten Codeausschnitt:

this.setState({'test':'me'});

Obwohl sich der Status nach dem ersten Klick nicht ändert, werden sowohl die übergeordnete als auch die untergeordnete Komponente neu gerendert. Dies liegt daran, dass „shouldComponentUpdate“ immer true zurückgibt und ein erneutes Rendern erzwingt.

Optimierung des erneuten Renderns

Um unnötige erneute Renderings zu verhindern, können Sie „shouldComponentUpdate“ überschreiben " und vergleichen Sie die neuen Requisiten und den neuen Zustand mit den vorherigen Werten. Wenn es keine wesentlichen Änderungen gibt, die sich auf die Benutzeroberfläche auswirken würden, können Sie false zurückgeben, um das Rendern zu verhindern.

Bedenken Sie, dass die übermäßige Verwendung von „shouldComponentUpdate“ zu Leistungsproblemen führen kann, wenn die Logik zu komplex ist oder unnötige Vergleiche durchführt.

Das obige ist der detaillierte Inhalt vonReactJS: Löst „setState' immer ein vollständiges erneutes Rendern aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!