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.
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.
: 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.
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?
Komponentisierung weist zwei bemerkenswerte Merkmale auf:
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)
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:
Deklarativer Code:1. 拿起空调遥控器； 2. 打开空调； 3. 设置温度为 27 摄氏度；Nach dem Login kopieren
1. 调用“开空调(27)”函数；
wie Funktionen durch Code implementiert werden
, sondern mehr nachzudenken
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.
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.
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:
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
