


Über welche Algorithmen verfügt das React-Framework? Detaillierte Erläuterung des Algorithmus des Reaktionsframeworks
In diesem Artikel werden hauptsächlich die Prinzipien des reagieren-Frameworks ausführlich erläutert. Schauen wir uns jetzt auch diesen Artikel an
Ich arbeite seit mehr als 2 Jahren an React. Ich liebe und hasse dieses Framework. Jeder kennt seine Vorteile, aber seine Mängel werden nach und nach aufgedeckt Bei großen Projekten wird in Kombination mit Frameworks von Drittanbietern wie
Redux
undReactRouter
die Menge an komplexem Geschäftscode sehr groß (der Front-End-Code ist häufig 1,5-mal so groß wie zuvor). Wenn das zugrunde liegende Design in der Anfangsphase nicht gut ist, stehen Sie häufig vor dem Problem einer geringen Entwicklungseffizienz. Im Folgenden werden einige Kernkonzepte des React-Frameworks zusammengefasst. Ich hoffe, dass es für alle hilfreich ist:
React-Diff-Algorithmus
Reacts diff
-Algorithmus ist Virtual DOM
Der Grund dafür, dass man sich am meisten auf Eigenwilligkeit verlässt, ist, dass wir alle wissen, dass die Leistung einer Seite im Allgemeinen von der Rendering-Geschwindigkeit und der Anzahl der Renderings abhängt. Wie kann der diff
-Algorithmus für die Entwicklung optimal genutzt werden? Schauen wir uns zunächst an, wie es funktioniert.
Traditioneller Diff-Algorithmus
Berechnen Sie die minimalen Operationen, die zum Konvertieren einer Baumstruktur in eine andere Baumstruktur erforderlich sind. Der traditionelle Diff-Algorithmus vergleicht Knoten nacheinander durch Schleifenrekursion, was ineffizient und komplex ist O(n^3)
, wobei n die Gesamtzahl der Knoten im Baum ist. Mit anderen Worten: Wenn Sie 1.000 Knoten anzeigen möchten, müssen Sie Milliarden von Vergleichen nacheinander durchführen. Dieser Leistungsverbrauch ist für Frontend-Projekte nicht akzeptabel.
Kernalgorithmus
Wie oben zu sehen ist, ist die Komplexität des herkömmlichen Diff-Algorithmus O(n^3)
, was offensichtlich die Leistungsanforderungen nicht erfüllen kann. Und React
verwandelt Probleme von O(n^3)
Komplexität in Probleme von O(n)
Komplexität, indem er mutige Strategien formuliert. Wie hat er es gemacht?
Tree Diff
Es gibt nur sehr wenige ebeneübergreifende Bewegungsvorgänge von DOM-Knoten in der Web-Benutzeroberfläche und können ignoriert werden. React hat eine prägnante und klare Optimierung des Baumalgorithmus vorgenommen, d. h. der hierarchische Vergleich von Bäumen vergleicht nur Knoten auf derselben Ebene. Wie in der Abbildung unten gezeigt:
React verwendet updateDepth, um die Ebene des virtuellen DOM-Baums zu steuern. Es werden nur DOM-Knoten im gleichen Farbfeld verglichen. Das heißt, alle untergeordneten Knoten unter einem übergeordneten Knoten werden mit derselben Farbe verglichen. Wenn festgestellt wird, dass ein Knoten nicht mehr existiert, werden der Knoten und seine Unterknoten vollständig gelöscht und nicht für weitere Vergleiche verwendet. Auf diese Weise ist nur eine Durchquerung des Baums erforderlich, um den Vergleich des gesamten DOM-Baums abzuschließen.
// tree diff算法实现updateChildren: function(nextNestedChildrenElements, transaction, context) { updateDepth++; var errorThrown = true; try { this._updateChildren(nextNestedChildrenElements, transaction, context); errorThrown = false; } finally { updateDepth--; if (!updateDepth) { if (errorThrown) { clearQueue(); } else { processQueue(); } } } }
Warum sollten wir die ebenenübergreifenden Operationen von DOM-Knoten reduzieren?
Wie unten gezeigt, wird der A-Knoten (einschließlich seiner Unterknoten) vollständig auf den D-Knoten verschoben, da React lediglich die Positionstransformation von Knoten auf derselben Ebene und für Knoten auf verschiedenen Ebenen berücksichtigt , es erstellt und löscht sie nur. Wenn der Wurzelknoten feststellt, dass A im untergeordneten Knoten verschwunden ist, zerstört er A direkt. Wenn D feststellt, dass es einen zusätzlichen untergeordneten Knoten A gibt, erstellt er ein neues A (einschließlich untergeordneter Knoten) als untergeordneten Knoten. Zu diesem Zeitpunkt lautet der Ausführungsstatus von React diff
: A erstellen -> B erstellen ->
Es kann festgestellt werden, dass, wenn sich ein Knoten über Ebenen hinweg bewegt, der imaginäre Bewegungsvorgang nicht stattfindet, sondern der Baum mit A als Wurzelknoten vollständig neu erstellt wird , ein Vorgang, der sich auf die Leistung React
auswirkt.
Komponentenunterschied
Zwei Komponenten mit derselben Klasse erzeugen ähnliche Baumstrukturen, und zwei Komponenten mit unterschiedlichen Klassen erzeugen unterschiedliche Baumstrukturen.
Wenn es sich um Komponenten des gleichen Typs handelt, fahren Sie mit dem Vergleich gemäß der ursprünglichen Strategie fort
virtual DOM tree
.Wenn nicht, wird die Komponente als
dirty component
beurteilt, wodurch alle untergeordneten Knoten unter der gesamten Komponente ersetzt werden.Für denselben Komponententyp ist es möglich, dass
Virtual DOM
keine Änderungen vorgenommen wurden. Wenn Sie dies sicher wissen, können Sie viel Zeit für die Diff-Operation sparenReact
ermöglicht Benutzern die Verwendung vonshouldComponentUpdate()
, um zu bestimmen, ob die Komponente unterschieden werden muss.
Wie oben gezeigt, wenn component D
in component G
geändert wird, ändern sich die Strukturen der beiden, auch wenn die beiden component
ähnliche Strukturen haben, sobald React
feststellt, dass D und G unterschiedliche Arten von Komponenten sind nicht verglichen werden. Löschen Sie stattdessen component D
direkt und erstellen Sie component G
und seine untergeordneten Knoten neu. Wenn zwei component
von unterschiedlichem Typ sind, aber eine ähnliche Struktur haben, wirkt sich React diff
zwar auf die Leistung aus, aber wie im offiziellen Blog von React
heißt es: Verschiedene Arten von component
haben kaum eine Chance auf ähnliche DOM tree
, also ist es so Es ist schwierig, dass solche extremen Faktoren einen signifikanten Einfluss auf den Entwicklungsprozess haben.
Element diff
Für eine Gruppe untergeordneter Knoten auf derselben Ebene können sie durch eine eindeutige ID unterschieden werden. React schlägt eine Optimierungsstrategie vor: Entwickler dürfen eindeutige Schlüssel hinzufügen, um dieselbe Gruppe von untergeordneten Knoten auf derselben Ebene zu unterscheiden. Obwohl es sich nur um eine kleine Änderung handelt, hat sich die Leistung weltbewegend verändert!
Die in der neuen und alten Sammlung enthaltenen Knoten sind wie in der folgenden Abbildung dargestellt. Durch den Vergleich der neuen und alten Sammlung wird festgestellt, dass die Knoten in der neuen und alten Sammlung sind Die gleichen Knoten müssen nicht gelöscht und erstellt werden. Sie müssen lediglich die Positionen der Knoten im alten Satz verschieben und sie auf die Positionen der Knoten im neuen Satz aktualisieren Das von React gegebene Ergebnis ist: B und D führen keine Operationen aus und A und C führen Verschiebungsoperationen aus.
Entwicklungsvorschläge
(1)[basierend auf Tree Diff] Bei der Entwicklung von Komponenten hilft die Aufrechterhaltung einer stabilen DOM-Struktur insgesamt Leistung. Mit anderen Worten: Nehmen Sie so wenig dynamische Manipulationen wie möglich an der DOM-Struktur vor, insbesondere an Bewegungsoperationen. Wenn die Anzahl der Knoten zu groß ist oder die Seite zu oft aktualisiert wird, ist das Phänomen des Einfrierens der Seite offensichtlicher. Sie können Knoten über CSS ein- oder ausblenden, ohne tatsächlich DOM-Knoten entfernen oder hinzufügen zu müssen.
(2)[Basierend auf Komponentenunterschied] Achten Sie bei der Entwicklung von Komponenten darauf, shouldComponentUpdate()
zu verwenden, um unnötige Aktualisierungen von Komponenten zu reduzieren. Darüber hinaus sollten ähnliche Strukturen so weit wie möglich in Komponenten gepackt werden, was nicht nur die Codemenge reduziert, sondern auch den component diff
Leistungsverbrauch verringert.
(3)[Basierend auf Elementdiff] Versuchen Sie bei Listenstrukturen, Vorgänge wie das Verschieben des letzten Knotens an den Kopf der Liste zu reduzieren Aktualisierungsvorgänge sind zu häufig. Dies wirkt sich in gewissem Maße auf die Renderleistung von React aus.
React-Lebenszyklus
Der Lebenszyklus von React kann in vier Situationen unterteilt werden:
Beim Laden für Beim ersten Installieren einer Komponente führen Sie
getDefaultProps
,getInitialState
,componentWillMount
,render
undcomponentDidMount
in der Reihenfolgeaus. Bei der Deinstallation einer Komponente führen Sie < aus 🎜>; >
componentWillUnmount
Wenn die Komponente neu geladen wird, werden - ,
und
,getInitialState
der Reihe nach ausgeführt,componentWillMount
jedoch nichtrender
componentDidMount
getDefaultProps
Wenn die Komponente erneut gerendert wird, erhält die Komponente den aktualisierten Status und führt , - ,
und
componentWillReceiveProps
der Reihe nach aus.shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
Drei Zustände der React-Komponenten Zustand 1: MONTAGE
,
im Leben verantwortlich Zyklus, und mountComponent
. getInitialState
componentWillMount
render
componentDidMount
,
,, updateComponent
und <🎜 verantwortlich >. componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
Status 3: UNMOUNTING
ist für die Verwaltung von
React Reference Manual
der PHP Chinese-Website, um mehr zu erfahren)unmountComponent
Setzen Sie zunächst den Status auf componentWillUnmount
. Wenn vorhanden ist, führen Sie ihn aus. Wenn zu diesem Zeitpunkt innerhalb von
nicht ausgelöst. Der Aktualisierungsstatus ist UNMOUNTING
und der Deinstallationsvorgang der Komponente ist abgeschlossen. Der Implementierungscode lautet wie folgt: componentWillUnmount
// 卸载组件unmountComponent: function() { // 设置状态为 UNMOUNTING this._compositeLifeCycleState = CompositeLifeCycle.UNMOUNTING; // 如果存在 componentWillUnmount,则触发 if (this.componentWillUnmount) { this.componentWillUnmount(); } // 更新状态为 null this._compositeLifeCycleState = null; this._renderedComponent.unmountComponent(); this._renderedComponent = null; ReactComponent.Mixin.unmountComponent.call(this); }
React生命周期总结
生命周期 | 调用次数 | 能否使用setState() |
---|---|---|
getDefaultProps | 1 | 否 |
getInitialState | 1 | 否 |
componentWillMount | 1 | 是 |
render | >=1 | 否 |
componentDidMount | 1 | 是 |
componentWillReceiveProps | >=0 | 是 |
shouldComponentUpdate | >=0 | 否 |
componentWillUpdate | >=0 | 否 |
componentDidUpdate | >=0 | 否 |
componentWillUnmount | 1 | 否 |
componentDidUnmount | 1 | 否 |
setState实现机制
setState
是React
框架的核心方法之一,下面介绍一下它的原理:
// 更新 statesetState: function(partialState, callback) { // 合并 _pendingState this.replaceState( assign({}, this._pendingState || this.state, partialState), callback ); },
当调用 setState
时,会对 state
以及 _pendingState
更新队列进行合并操作,但其实真正更新 state
的幕后黑手是replaceState
。
// 更新 statereplaceState: function(completeState, callback) { validateLifeCycleOnReplaceState(this); // 更新队列 this._pendingState = completeState; // 判断状态是否为 MOUNTING,如果不是,即可执行更新 if (this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING) { ReactUpdates.enqueueUpdate(this, callback); } },
replaceState
会先判断当前状态是否为 MOUNTING
,如果不是即会调用 ReactUpdates.enqueueUpdate
执行更新。
当状态不为 MOUNTING
或 RECEIVING_PROPS
时,performUpdateIfNecessary
会获取 _pendingElement
、_pendingState
、_pendingForceUpdate
,并调用 updateComponent
进行组件更新。
// 如果存在 _pendingElement、_pendingState、_pendingForceUpdate,则更新组件performUpdateIfNecessary: function(transaction) { var compositeLifeCycleState = this._compositeLifeCycleState; // 当状态为 MOUNTING 或 RECEIVING_PROPS时,则不更新 if (compositeLifeCycleState === CompositeLifeCycle.MOUNTING || compositeLifeCycleState === CompositeLifeCycle.RECEIVING_PROPS) { return; } var prevElement = this._currentElement; var nextElement = prevElement; if (this._pendingElement != null) { nextElement = this._pendingElement; this._pendingElement = null; } // 调用 updateComponent this.updateComponent( transaction, prevElement, nextElement ); }
如果在
shouldComponentUpdate
或componentWillUpdate
中调用setState
,此时的状态已经从RECEIVING_PROPS -> NULL
,则performUpdateIfNecessary
就会调用updateComponent
进行组件更新,但updateComponent
又会调用shouldComponentUpdate
和componentWillUpdate
,因此造成循环调用,使得浏览器内存占满后崩溃。
开发建议
不建议在 getDefaultProps
、getInitialState
、shouldComponentUpdate
、componentWillUpdate
、render
和 componentWillUnmount
中调用 setState,特别注意:不能在 shouldComponentUpdate
和 componentWillUpdate
中调用 setState
,会导致循环调用。
本篇文章到这就结束了(想看更多就到PHP中文网React使用手册栏目中学习),有问题的可以在下方留言提问。
Das obige ist der detaillierte Inhalt vonÜber welche Algorithmen verfügt das React-Framework? Detaillierte Erläuterung des Algorithmus des Reaktionsframeworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



01Ausblicksübersicht Derzeit ist es schwierig, ein angemessenes Gleichgewicht zwischen Detektionseffizienz und Detektionsergebnissen zu erreichen. Wir haben einen verbesserten YOLOv5-Algorithmus zur Zielerkennung in hochauflösenden optischen Fernerkundungsbildern entwickelt, der mehrschichtige Merkmalspyramiden, Multierkennungskopfstrategien und hybride Aufmerksamkeitsmodule verwendet, um die Wirkung des Zielerkennungsnetzwerks in optischen Fernerkundungsbildern zu verbessern. Laut SIMD-Datensatz ist der mAP des neuen Algorithmus 2,2 % besser als YOLOv5 und 8,48 % besser als YOLOX, wodurch ein besseres Gleichgewicht zwischen Erkennungsergebnissen und Geschwindigkeit erreicht wird. 02 Hintergrund und Motivation Mit der rasanten Entwicklung der Fernerkundungstechnologie wurden hochauflösende optische Fernerkundungsbilder verwendet, um viele Objekte auf der Erdoberfläche zu beschreiben, darunter Flugzeuge, Autos, Gebäude usw. Objekterkennung bei der Interpretation von Fernerkundungsbildern

Die Bewertung des Kosten-/Leistungsverhältnisses des kommerziellen Supports für ein Java-Framework umfasst die folgenden Schritte: Bestimmen Sie das erforderliche Maß an Sicherheit und Service-Level-Agreement-Garantien (SLA). Die Erfahrung und das Fachwissen des Forschungsunterstützungsteams. Erwägen Sie zusätzliche Services wie Upgrades, Fehlerbehebung und Leistungsoptimierung. Wägen Sie die Kosten für die Geschäftsunterstützung gegen Risikominderung und Effizienzsteigerung ab.

Die Lernkurve eines PHP-Frameworks hängt von Sprachkenntnissen, Framework-Komplexität, Dokumentationsqualität und Community-Unterstützung ab. Die Lernkurve von PHP-Frameworks ist im Vergleich zu Python-Frameworks höher und im Vergleich zu Ruby-Frameworks niedriger. Im Vergleich zu Java-Frameworks haben PHP-Frameworks eine moderate Lernkurve, aber eine kürzere Einstiegszeit.

Das leichte PHP-Framework verbessert die Anwendungsleistung durch geringe Größe und geringen Ressourcenverbrauch. Zu seinen Merkmalen gehören: geringe Größe, schneller Start, geringer Speicherverbrauch, verbesserte Reaktionsgeschwindigkeit und Durchsatz sowie reduzierter Ressourcenverbrauch. Praktischer Fall: SlimFramework erstellt eine REST-API, nur 500 KB, hohe Reaktionsfähigkeit und hoher Durchsatz

Zählen klingt einfach, ist aber in der Praxis sehr schwierig. Stellen Sie sich vor, Sie werden in einen unberührten Regenwald transportiert, um eine Wildtierzählung durchzuführen. Wenn Sie ein Tier sehen, machen Sie ein Foto. Digitalkameras zeichnen nur die Gesamtzahl der verfolgten Tiere auf, Sie interessieren sich jedoch für die Anzahl der einzelnen Tiere, es gibt jedoch keine Statistiken. Wie erhält man also am besten Zugang zu dieser einzigartigen Tierpopulation? An diesem Punkt müssen Sie sagen: Beginnen Sie jetzt mit dem Zählen und vergleichen Sie schließlich jede neue Art vom Foto mit der Liste. Für Informationsmengen bis zu mehreren Milliarden Einträgen ist diese gängige Zählmethode jedoch teilweise nicht geeignet. Informatiker des Indian Statistical Institute (UNL) und der National University of Singapore haben einen neuen Algorithmus vorgeschlagen – CVM. Es kann die Berechnung verschiedener Elemente in einer langen Liste annähern.

Wählen Sie das beste Go-Framework basierend auf Anwendungsszenarien aus: Berücksichtigen Sie Anwendungstyp, Sprachfunktionen, Leistungsanforderungen und Ökosystem. Gängige Go-Frameworks: Gin (Webanwendung), Echo (Webdienst), Fiber (hoher Durchsatz), gorm (ORM), fasthttp (Geschwindigkeit). Praktischer Fall: Erstellen einer REST-API (Fiber) und Interaktion mit der Datenbank (gorm). Wählen Sie ein Framework: Wählen Sie fasthttp für die Schlüsselleistung, Gin/Echo für flexible Webanwendungen und gorm für die Datenbankinteraktion.

Bei der Go-Framework-Entwicklung treten häufige Herausforderungen und deren Lösungen auf: Fehlerbehandlung: Verwenden Sie das Fehlerpaket für die Verwaltung und Middleware zur zentralen Fehlerbehandlung. Authentifizierung und Autorisierung: Integrieren Sie Bibliotheken von Drittanbietern und erstellen Sie benutzerdefinierte Middleware zur Überprüfung von Anmeldeinformationen. Parallelitätsverarbeitung: Verwenden Sie Goroutinen, Mutexe und Kanäle, um den Ressourcenzugriff zu steuern. Unit-Tests: Verwenden Sie Gotest-Pakete, Mocks und Stubs zur Isolierung sowie Code-Coverage-Tools, um die Angemessenheit sicherzustellen. Bereitstellung und Überwachung: Verwenden Sie Docker-Container, um Bereitstellungen zu verpacken, Datensicherungen einzurichten und Leistung und Fehler mit Protokollierungs- und Überwachungstools zu verfolgen.

Beim Go-Framework-Lernen gibt es fünf Missverständnisse: übermäßiges Vertrauen in das Framework und eingeschränkte Flexibilität. Wenn Sie die Framework-Konventionen nicht befolgen, wird es schwierig, den Code zu warten. Die Verwendung veralteter Bibliotheken kann zu Sicherheits- und Kompatibilitätsproblemen führen. Die übermäßige Verwendung von Paketen verschleiert die Codestruktur. Das Ignorieren der Fehlerbehandlung führt zu unerwartetem Verhalten und Abstürzen.
