Dieser Artikel stellt Ihnen die Verwendung von React vor: Die fünf Hauptfunktionen des React-Frameworks haben einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.
01. Der Hintergrund der Entstehung von React
Alles auf der Welt hat seine Ursache und Wirkung, und die Entstehung eines Rahmens muss untrennbar mit einem bestimmten Hintergrund der Ära verbunden sein. Für React müssen vor allem zwei Hintergründe erwähnt werden:
Ein großer Teil der Geschäftslogik wurde von der Back-End-Implementierung zur Front-End-Implementierung geändert : AJAX-Technologie Das Aufkommen des Internets hat die Menschen dazu veranlasst, ein reibungsloseres interaktives Weberlebnis anzustreben, was dazu geführt hat, dass eine große Anzahl komplexer Geschäftslogiken von der Back-End-Entwicklung bis zur Front-End-Entwicklung implementiert wurde Quantitative Änderungen führen zu qualitativen Änderungen. Wie kann die Anwendungsleistung besser verbessert werden? Angesichts der jahrzehntelangen Erfahrung in der Backend-Entwicklung ist es keine Überraschung, dass die Antwort darin besteht, ein großes Frontend-Framework zu verwenden.
- Für SPA-Anwendungen mit komplexer Logik weist das ursprüngliche Front-End-Framework eine schlechte Leistung auf
: Vor dem Aufkommen von React gab es bereits ausgereifte wie und Facebook-Ingenieure stellten jedoch fest, dass diese Frameworks bei komplexen Geschäftsszenarien (z. B. häufigen DOM-Vorgängen) keine gute Seitenleistung erzielen konnten, und planten daher, ein eigenes Framework zu entwickeln, um dieses Problem zu lösen. Das entwickelte Framework ist React, und die Lösung für dieses Problem lautet: Verwenden Sie backbone.jsVirtual DOMAngular.js.
02. Virtuelles DOM
Die Idee des virtuellen DOM ist eigentlich nicht schwer zu verstehen: Wir wissen, dass häufige DOM-Operationen dazu führen, dass der Browser viel leistet von Berechnungen im DOM-Baum Dies ist der wichtigste Leistungsengpass des Frontends. Solange wir also mehrere DOM-Vorgänge zusammenführen und dann „das Ergebnis in einem Vorgang vervollständigen“ und
einmal
Vorgänge am DOM-Baum zeitnah ausführen können, können wir die Front-End-Leistung erheblich verbessern . Für React besteht die Lösung zur Verwirklichung dieser Idee in der Verwendung von
Virtual DOM
. Was wir einen DOM-Baum nennen, ist eigentlich ein JavaScript-Objekt, das in einer Baumstruktur verschachtelt ist. Im Browser führen Änderungen am DOM-Baum dazu, dass der Browser eine Reihe von Berechnungen durchführt. Daher können wir basierend auf der vorhandenen DOM-Baumstruktur einen identischen DOM-Baum, dh ein „virtuelles DOM“, klonen Es wird in diesem virtuellen DOM implementiert und dann im Browser in den DOM-Baum eingebunden, um den zuvor erwähnten Leistungsengpass zu beheben. Obwohl es nicht schwer zu verstehen ist, beinhaltet dieser Prozess tatsächlich viele komplexe Situationen und einige algorithmische Schwierigkeiten, die ausreichen, um einen neuen Artikel zu eröffnen, um ihn hier zu erklären.
03. Was ist Komponentisierung?
Bei der Komponentisierung handelt es sich um ein Codeentwurfsmuster, das bedeutet, dass Sie einige einfache Funktionen zur Verwendung in eine komplexere Funktion einbauen können.
Komponentisierung weist zwei bemerkenswerte Merkmale auf:
Kapselung: Die von einer Komponente benötigten Daten werden innerhalb der Komponente gekapselt; Zusammensetzung: Eine Komponente kann mit anderen Komponenten kombiniert werden, um komplexere Geschäftslogik zu implementieren. So wie eine gute Funktion dem „DOT“-Prinzip (Do One Thing) entsprechen sollte, kann eine gute React-Komponente die Geschäftslogik anderer Komponenten nicht vermischen. Wir sollten versuchen, React-Komponenten einfach und so komplex zu halten Die interne Logik der React-Komponenten wird deutlich.
UI = render(data)
Nach dem Login kopieren
Auf diese Weise kann in React eine komplexe Ansicht erstellt werden Es wird ganz einfach:
Komponenten kombinieren
;
04. Deklarativer Code bezieht sich auf: Entwicklern erlauben, zu folgen, „was ich tun möchte“, anstatt „ „Was soll der Computer tun?“ Überlegen Sie, wie Sie Geschäftsanforderungen erfüllen können.
Lassen Sie uns kurz den Unterschied zwischen „deklarativem Code“ und „imperativem Code“ vergleichen:
Imperativer Code:
Ich habe das Gefühl, dass das Wetter zu heiß ist. Schreiben Sie Code:
1. 拿起空调遥控器；
2. 打开空调；
3. 设置温度为 27 摄氏度；
Nach dem Login kopieren
Deklarativer Code:
05. Einseitiger Datenfluss
In React sind die Daten in einer Baumform organisiert und fließen in eine Richtung von oben nach unten (entsprechend dem DOM-Baum). Der Datenfluss ist klarer und der Status der Komponenten ist besser kontrollierbar;
Bei einseitigen Anwendungen mit komplexer Geschäftslogik akzeptiert das Frontend eine große Datenmenge und Die Beziehung zwischen den Daten ist ebenfalls kompliziert, und React übernimmt die Entwicklung verschiedener Benutzeroberflächen je nach Datenfluss. Ohne eine klare und vernünftige Datenflussverwaltungsmethode kann der endgültige Code nur dann ein Chaos sein Wenn die Benutzeroberfläche oder die Daten beschädigt sind, wird es schwierig sein, den Fehler zu beheben. Wo liegt die Ursache?
Aus diesem Grund verwendet React einen „einseitigen Datenfluss“-Ansatz, der nur den Datenfluss von übergeordneten Elementen zu untergeordneten Elementen ermöglicht.
Der Mechanismus des unidirektionalen Datenflusses von React ist ungefähr wie folgt: Daten werden auf der übergeordneten Komponente gespeichert und fließen nach unten zur untergeordneten Komponente. Obwohl die Daten auf der übergeordneten Komponente gespeichert werden, können sowohl übergeordnete als auch untergeordnete Komponenten diese Daten verwenden. Wenn die Daten jedoch aktualisiert werden müssen, sollte nur die übergeordnete Komponente aktualisiert werden. Wenn die untergeordnete Komponente die Daten ändern muss, kann sie aktualisierte Daten nur an die übergeordnete Komponente senden, wo die Daten tatsächlich aktualisiert werden. Sobald die Daten von der übergeordneten Komponente aktualisiert wurden, erhält die untergeordnete Komponente die neuen Daten.
Der unidirektionale Datenfluss mag nach zusätzlicher Arbeit klingen, macht es für Entwickler jedoch einfacher, herauszufinden, wie die Anwendung funktioniert.
06. Reine JavaScript-Syntax
Wir können diese Funktion von React leicht ignorieren, das heißt, in React gibt es keine spezielle proprietäre React-Syntax, die verstanden und beachtet werden muss, alle Komponenten, Datenoperationen und Geschäftslogik werden alle mithilfe der JavaScript-Syntax implementiert.
Das bedeutet, dass Sie, wenn Sie React verwenden möchten, nur die Ideen von React und einige wichtige APIs verstehen müssen, um sofort mit der Verwendung von React beginnen zu können, um komplexe Anwendungen zu entwickeln. Und React ermutigt Sie auch, funktionale Programmierideen für die Entwicklung zu verwenden. Sie können alle Ihre funktionalen Programmierkenntnisse in der React-Entwicklung einsetzen.
07. Zusammenfassung
In diesem Artikel haben wir zunächst über den Hintergrund des React-Frameworks gesprochen und dann die fünf Hauptmerkmale von React erklärt:
Virtuelles DOM;
Komponentisierung;
Einseitiger Datenfluss ;
Reine JavaScript-Syntax
Verwandte Empfehlungen:
Über die Analyse der Ereignisschleife in Node
Einführung in responsive React Native Echarts-Komponenten
Das obige ist der detaillierte Inhalt vonVerwendung von React: Fünf Hauptfunktionen des React-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
