ReactJS – Wird das Rendern bei jedem „setState“-Aufruf ausgelöst?
React unterscheidet zwischen seinem virtuellen DOM und dem nativen DOM. Wenn eine Komponente eine Statusaktualisierung erhält, wird ihre Rendermethode aufgerufen. Dadurch wird eine neue virtuelle DOM-Darstellung der Komponente generiert. Es ist jedoch wichtig zu beachten, dass React das native DOM nicht sofort aktualisiert.
Standardverhalten: Bei jeder Statusaktualisierung erneut rendern
Standardmäßig geht React davon aus dass jede Zustandsänderung ein erneutes Rendern der Benutzeroberfläche erfordert. Dadurch wird sichergestellt, dass die Benutzeroberfläche immer auf dem neuesten Stand ist.
Virtuelles DOM-Rendering vs. natives DOM-Rendering
Wenn das Rendern ausgeführt wird, wird ein neues generiert virtuelles DOM. Diese Phase hat keine Auswirkungen auf das native DOM. Anschließend vergleicht React das neue virtuelle DOM mit dem vorherigen und aktualisiert nur die tatsächlichen Elemente im Browser, die sich geändert haben. Diese Optimierung verhindert unnötiges erneutes Rendern und minimiert Browser-Reflows und Neulackierungen.
Kann ich das erneute Rendern optimieren?
Sie können die Lebenszyklusmethode ShouldComponentUpdate zur Feinabstimmung implementieren wenn eine Komponente erneut gerendert wird. Es werden zwei Argumente benötigt:
Sie können Verwenden Sie ShouldComponentUpdate, um zu überprüfen, ob sich die kommenden Requisiten und der Status erheblich von den aktuellen unterscheiden. Ist dies nicht der Fall, können Sie false zurückgeben, um ein erneutes Rendern zu verhindern und die Leistung zu verbessern.
Beispiel
Im bereitgestellten Beispiel werden sowohl übergeordnete als auch untergeordnete Komponenten erneut gerendert bei jedem Klick, auch wenn der Status in der übergeordneten Komponente unverändert bleibt. Dies liegt daran, dass setState immer ein erneutes Rendern des virtuellen DOM auslöst und React davon ausgeht, dass die Benutzeroberfläche aktualisiert werden muss. Um in solchen Szenarien unnötiges erneutes Rendern zu verhindern, können Sie ShouldComponentUpdate implementieren, um zu überprüfen, ob sich der Status tatsächlich geändert hat.
Das obige ist der detaillierte Inhalt vonLöst jeder „setState'-Aufruf ein React Render aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
