Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Mein Englisch ist begrenzt, meine Kenntnisse sind mittelmäßig und ich bin kein Übersetzer. Wenn Sie mir nicht glauben können, lesen Sie bitte den Originaltext

Ursprüngliche Adresse:https://facebook.github.io/react/docs/advanced-performance.html

---

###Leistungsoptimierung

Wann immer sich Entwickler für die Verwendung von React in einem realen Projekt entscheiden, stellen sie zunächst eine Frage: Wird die Verwendung von React das Projekt schneller, flexibler und einfacher zu warten machen? Wird der Prozess des erneuten Renderns der Schnittstelle bei jeder Änderung der Statusdaten außerdem zu einem Leistungsengpass führen? Intern stellt React die Leistung sicher, indem es einige subtile Techniken verwendet, um teure DOM-Vorgänge zu minimieren, die jedes Mal Aktualisierungen der Benutzeroberfläche verursachen.

####Vermeiden Sie direkte Auswirkungen auf DOM
React implementiert eine virtuelle DOM-Ebene, die zur Abbildung des nativen DOM-Baums des Browsers verwendet wird. Durch diese virtuelle DOM-Schicht kann React den direkten Betrieb des DOM vermeiden, da die Geschwindigkeit des direkten Betriebs des Browser-DOM viel geringer ist als die des Betriebs von JavaScript-Objekten. Immer wenn sich die Eigenschaften oder der Status einer Komponente ändern, erstellt React einen neuen virtuellen Dom im Speicher und vergleicht ihn mit dem ursprünglichen alten, um festzustellen, ob der Dom-Baum des Browsers aktualisiert werden muss, wodurch die Darstellung des Doms optimiert wird Leistungsverlust möglich.

Darüber hinaus stellt React Komponentenlebenszyklusfunktionen bereit.shouldComponentUpdate, ruft die Komponente diese Funktion auf, bevor sie sich für ein erneutes Rendern entscheidet (nachdem der virtuelle DOM-Vergleich abgeschlossen und das endgültige DOM generiert wurde). Diese Funktion gibt dem Entwickler die Berechtigung zum erneuten Rendern und die Funktion kehrt standardmäßig direkt zurücktrue, was darauf hinweist, dass das DOM-Update standardmäßig direkt gestartet wird:

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

Es ist zu beachten, dass React diese Funktion sehr häufig aufruft. Wenn Sie also planen, die Logik dieser Funktion selbst zu implementieren, stellen Sie bitte die Leistung so weit wie möglich sicher.

Wenn Sie beispielsweise eine Chat-Anwendung mit mehreren Beiträgen haben, ändert sich zu diesem Zeitpunkt nur einer davon, wenn Sie Folgendes implementierenshouldComponentUpdateDurch Reagieren wird vermieden, dass Beiträge, die sich je nach Situation nicht geändert haben, erneut gerendert werden:

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

Kurz gesagt vermeidet React weitestgehend teure DOM-Operationen und ermöglicht es Entwicklern, in dieses Verhalten einzugreifen.

####shouldComponentUpdate in Aktion
Hier ist ein Beispiel für eine Komponente, die untergeordnete Elemente enthält, wie unten gezeigt:

Vorherige Nächste