Alles, was Sie über React wissen müssen: Sicherheit, Wiederverwendbarkeit, Komponenten und Leistung. Finden Sie heraus, ob es geschäftlich gut zu Ihrem Projekt passt.
A QUICK SUMMARY – FOR THE BUSY ONES
TABLE OF CONTENTS
Jedes Mal, wenn CTOs, leitende Entwickler und Manager UI-Bibliotheken für ihre Projekte wählen, erwarten sie einige wichtige Vorteile:
Dies und vieles mehr ist genau das, was Sie von React erhalten.
Lassen Sie uns herausfinden, wie.
Eine ganze Reihe von Fachleuten hatte ihren ersten Kontakt mit React dank eines unvergesslichen Vortrags von Pete Hunt, einem ehemaligen Hauptmitarbeiter von React, mit dem Titel „Rethinking Best Practices“.
In einem der einprägsamsten Zitate von Hunt heißt es:
<blockquote><p>Das Framework kann nicht wissen, wie es Bedenken für Sie trennen kann. Es sollte dem Benutzer nur leistungsstarke, ausdrucksstarke Tools zur Verfügung stellen, damit er es richtig machen kann</p> <p>— Pete Hunt, ehemaliger Mitwirkender bei React</p></blockquote>
Viele Unternehmen kommen zu dem Schluss, dass Backend-Muster wie MVC funktioniert nicht gut auf der Frontend-Seite. Diese Muster teilen die Verantwortlichkeiten auf, aber nicht auf die praktischste Art und Weise.
Aus diesem Grund bietet React einen anderen Ansatz an — Sie werden hier keine Modelle oder Controller sehen. Bei React geht es nur um die Ansichten und es werden keine Verantwortlichkeiten aufgeteilt. Es bietet leistungsstarke Tools für Teams, mit denen sie es so machen können, wie sie es für richtig halten.
Die Entwickler von React haben die React-Komponenten zu primären Bausteinen und zu einem primären gemacht Möglichkeit, den Code wiederzuverwenden in Anwendungen.
Die Verantwortlichkeiten sind nach Komponenten aufgeteilt, die auf dem Bildschirm zu sehen sind, nicht nach Technologien wie HTML, CSS und JavaScript.
React schlägt vor, dass die Dinge, die sich zusammen ändern, zusammengehalten werden sollten. Markup, Daten, Logik und manchmal auch Stile werden normalerweise in einer Datei zusammengefasst, da sie sich zusammen ändern.
Das Markup selbst besteht nicht nur aus HTML, sondern auch aus JSX, dem syntaktischen Zucker, der auf der API von React basiert. Er verbessert den HTML-Code erheblich und ermöglicht es Entwicklern, JavaScript anstelle einer anderen Vorlagensprache zu verwenden.
Das Erstaunliche ist, dass die React-Komponenten es ermöglichen, Verantwortlichkeiten auf der Grundlage dessen, was auf dem Bildschirm zu sehen ist, aufzuteilen.
<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: React-Komponenten halten die Dinge zusammen, die sich zusammen ändern (z. B. Markup, Daten, Logik)</p></span>.
Wenn Sie in React-Anwendungen eine Benutzerprofil-"Komponente“ auf dem Bildschirm sehen, können Sie davon ausgehen, dass Sie eine entsprechende UserProfileComponent.js und alle Informationen, die Sie dazu benötigen, in der Codebasis finden. Zusammenhängende Dinge zusammenzuhalten hilft, eine hohe Kohäsion der Komponenten zu erreichen.
Es ist auch einfacher, über die Anwendungsstruktur nachzudenken, wenn Sie so darüber nachdenken.
Eine weitere nützliche Eigenschaft von React-Komponenten ist die klar definierte Oberfläche.
Alle React-Komponenten:
Diese vier werden dazu beitragen, eine geringe Kopplung zwischen den Komponenten zu erreichen — eine weitere Softwarequalität, die sich sowohl Unternehmen als auch Entwickler wünschen, da sie das Schreiben von neuem Code und das Refactoring erheblich erleichtert. Die übersichtliche Oberfläche ermöglicht es Entwicklern, mehr Zeit mit der Bereitstellung von Funktionen zu verbringen, anstatt sich mit den Implementierungsdetails der Komponenten zu befassen.
Unabhängig davon, für welche UI-Technologie Sie sich entscheiden, müssen Entwickler möglicherweise einen Teil der Logik getrennt halten, um sie wiederzuverwenden. Hier führt React sekundäre Bausteine ein und andere Möglichkeiten, den Code wiederzuverwenden.
In React können Entwickler verwenden Komponenten höherer Ordnung (HoC), Hooks, Render-Requisiten oder Kontext zum Verschieben die generischen oder wiederverwendbaren Teile des Codes an einer separaten Stelle.
HoC funktioniert beispielsweise gut mit Dingen wie einem app-weiten Logger, die Google Maps-API-Integration kann als Hook oder Render-Requisite implementiert werden, und ein globaler Status, der von verschiedenen Komponenten gemeinsam genutzt werden muss, kann in einen globalen Kontextwert verschoben werden.
In einem traditionellen (MVC) Framework würde diese Logik in einen generischen Helfer oder Dienst extrahiert. In React gibt es dafür spezielle Tools.
<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: Komponenten höherer Ordnung (HoC), Hooks, Render-Requisiten und Kontext können verwendet werden, um generische oder wiederverwendbare Teile des Codes an eine separate Stelle zu verschieben</p></span>.
Bei Brainhub betrachten wir Frameworks und Bibliotheken als Tools, die wir verwenden können, um Geschäftsprobleme lösen. Bei React ist es genauso.
Einer der wichtigsten Aspekte für viele Unternehmen ist Skalierbarkeit und Wartbarkeit.
Hier denken wir über Dinge wie:
Die letzte Frage ist am einfachsten zu beantworten. Wir haben viele Beispiele für große Anwendungen, die React verwenden und einfach gut funktionieren — Facebook, Instagram oder Netflix.
In einem der Podcasts erwähnte Dan Abramov, der Schöpfer einer staatlichen Verwaltungsbibliothek namens Redux, dass sie haben rund 90.000 Bauteile in der Produktion bei Facebook. Es ist ein paar Jahre her, vielleicht sind es jetzt schon mehr.
Wenn es um Skalierbarkeit und Wartbarkeit des Codes geht, sind primäre und sekundäre Bausteine Dinge, auf die Sie sich verlassen können.
Es ist extrem einfach Extrahieren Sie neue Komponenten oder füge ein paar Komponenten zu einer zusammen. Viele Komponentenmuster Hilfe beim Refactoring, wenn sich die Struktur einer App ändert.
Per Definition ist React modulare, sodass es kein Problem ist, ein separates Modul in der Anwendung zu extrahieren und die Arbeitslast an neue Mitarbeiter oder sogar ein separates Team zu delegieren.
<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: Große Unternehmen wie Facebook und Netflix haben React vor allem dank seiner skalierbaren modularen Architektur erfolgreich eingesetzt.</p></span>
Dank des modularen Charakters ist es auch einfach, den gemeinsamen Teil der Anwendung zu extrahieren, der in verschiedenen Teilen des Produkts wiederverwendet oder bei Bedarf in andere Anwendungen im Projekt migriert werden kann.
Hohe Kohäsion, geringe Kopplung und Wiederverwendbarkeit der Komponenten scheinen für die Programmierer eine gute Sache zu sein, aber aus geschäftlicher Sicht ist das wichtig — diese Funktionen ermöglichen es uns, Änderungen schnell und an der richtigen Stelle vorzunehmen.
Wir haben bereits erwähnt, dass es ziemlich einfach ist, dem Projekt neue Leute hinzuzufügen. Aber was ist mit Leuten, die React noch nicht kennen und es lernen müssen?
Auch in React programmieren Entwickler, was sie auf dem Bildschirm sehen. Wenn sie zwei Komponenten an verschiedenen Stellen des Bildschirms sehen und sie kommunizieren, indem sie Daten austauschen, ist es sicher, dass der Code einen gemeinsamen Status enthält. Das kann im Code leicht nachverfolgt werden, indem man sich die Implementierung einer dieser Komponenten anschaut, und meistens spielt es keine Rolle, welche.
Die einzige Voraussetzung ist, zu verstehen, wie Daten in React-Anwendungen fließen und wie die Zustandssynchronisierung funktioniert.
Die Form eines React Die Lernkurve hängt wirklich davon ab darüber, wie gut Entwickler diese grundlegenden Konzepte verstehen. Das sind die Dinge, auf die sich die Leute konzentrieren sollten, wenn sie React lernen.
Ein guter Ausgangspunkt für Anfänger ist es, sich die ersten React-Präsentationen von 2013 bis 2014 anzusehen. Sie sind verfügbar hier.
Wenn Sie diese grundlegenden Konzepte verstehen, ist es einfach, alle React-Funktionen zu verstehen. Sie alle hängen von den gleichen Prinzipien des Datenflusses und der UI/State-Synchronisation ab. React ist in dieser Hinsicht sehr kohärent.
Unserer Erfahrung nach ist es für neue Teammitglieder ziemlich einfach, React zu verstehen, wenn es mindestens eine Person gibt, die es bereits kennt und zuvor verwendet hat.
Wir haben gesehen, wie Backend- und Datenbankentwickler React-Komponenten codiert haben und es nach ein paar Lerntagen richtig gemacht haben. Ein Grund dafür ist Mentoring. Die andere, ebenso wichtige, ist die Tatsache, dass React den Entwickler nicht zulässt, schlechten Code zu schreiben.
Programmierer müssen sich an die Grundprinzipien des unidirektionalen Datenflusses und der expliziten Statusaktualisierungen halten. Das sind die Bausteine, die Entwickler daran hindern, schlechten (oder einfach nur unordentlichen) Code zu schreiben, und die Anwendung wird nicht funktionieren, wenn sie sich nicht an sie halten.
Das ist ein gute Sache für Anfänger. Wenn sie nur die Grundlagen kennen, werden sie verstehen, was im Code passiert, und sie werden in der Lage sein, ihn zu ändern.
<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Tipp zum Mitnehmen: Die Lernkurve von React hängt wirklich davon ab, wie gut die Entwickler die Zustandssynchronisierung und die Datenflüsse verstehen, die relativ einfach zu verstehen sind</p></span>.
Dank Virtual DOM ist React standardmäßig sehr schnell.
Das virtuelle DOM (VDOM) ist ein Programmierkonzept, bei dem eine ideale oder „virtuelle“ Repräsentation einer Benutzeroberfläche im Speicher aufbewahrt und von einer Bibliothek wie ReactDOM mit dem „echten“ DOM synchronisiert wird. Dieser Prozess heißt Versöhnung. Sie können mehr über virtuelles DOM erfahren hier.
Unserer Meinung nach ist der wichtigste Teil die Fähigkeit, die Leistung schnell zu verbessern, wenn (und falls) wir sie brauchen.
Die Verbesserung der Leistung in React läuft darauf hinaus, unnötiges erneutes Rendern von Komponenten zu vermeiden.
Das React-Ökosystem bietet viele Techniken und Tools, sowohl eingebaut als auch von Drittanbietern, die es uns ermöglichen, das zu tun.
Um unnötige Komponenten und Zustandsupdates zu beobachten, können Entwickler Folgendes verwenden: React DevTools oder React Profiler.
Entwickler können sich bewerben Auswendiglernen unter Verwendung von React.memo, Memo verwenden, reine Komponenten, oder Lebenszyklusmethode Sollte die Komponente aktualisiert werden.
Dank Hooks Nebenwirkungen können übersprungen werden.
Codeaufteilung kann mit dynamischen Importen und Webpack angewendet werden.
Das erste Rendern kann mithilfe des serverseitigen Renderings optimiert werden. Der Vorteil ist eine bessere Benutzererfahrung und eine verbesserte Suchmaschinenoptimierung, da der Inhalt schneller gerendert wird als bei einer clientseitig gerenderten Anwendung.
<blockquote><p>In den letzten Jahren haben Unternehmen wie Walmart und Airbnb SSR eingeführt, um mit React leistungsstarke Benutzererlebnisse zu bieten. Das Rendern einer großen datenintensiven Anwendung auf dem Server kann jedoch schnell zu</p> einem Leistungsengpass führen. </blockquote><p>— Codementor</p>
Wenn das nicht genug ist, können Entwickler nach Bibliotheken von Drittanbietern suchen, die bei den Optimierungen noch weiter helfen. Eine der beliebtesten ist Erneut auswählen zum Auswendiglernen oder Immer/Immutable.js für unveränderliche Datenstrukturen, die dazu beitragen, die Anzahl der erneuten Renderings zu begrenzen.
Es lohnt sich auch, React regelmäßig zu aktualisieren, um neue Funktionen wie React Fiber zu erhalten, die die Leistung optimieren.
Fiber ist die neue Versöhnungs-Engine in React 16. Ihr Hauptziel ist es, das inkrementelle Rendern des virtuellen DOMs zu ermöglichen. Es hilft dabei, eine höhere Leistung zu erzielen, insbesondere beim Rendern von Grafiken und Animationen.
Du kannst mehr darüber lesen hier und hier.
Zu guter Letzt geht es um die Sicherheit von React und die Bibliothek ist für Sie da.
Dank Virtual DOM und zugrundeliegenden APIs wie Element erstellen () React ist ziemlich gut darin, Injektionsangriffe automatisch zu erkennen.
Und da JSX syntaktischer Zucker gegenüber createElement () -Aufrufen ist, kann seine Leistung genutzt werden, um die Anwendung mithilfe der Auto-Escaping-Funktion zu sichern.
Um die Dokumentation zu zitieren:
<blockquote><p>Standardmäßig maskiert React DOM alle in JSX eingebetteten Werte, bevor sie gerendert werden. Somit wird sichergestellt, dass Sie niemals etwas einfügen können, das nicht explizit in Ihrer Anwendung geschrieben ist. Alles wird vor dem Rendern in eine Zeichenfolge konvertiert. Dies hilft, XSS-Angriffe (Cross-Site-Scripting) zu verhindern</p>. <p>— createElement () -Dokumentation</p></blockquote>
React ist die perfekte Wahl, wenn Sie Wartbarkeit und Skalierbarkeit von Projekten erwarten. Das alles haben wir zu verdanken leistungsstarke Tools und es Ökosystem das ermöglicht es Teams, Bewerbungen richtig zu organisieren.
Ein großer Vorteil ist, dass Sie klein anfangen und zusätzliche, leistungsstärkere Tools hinzufügen können, wenn Sie sie benötigen.
Dies ist auch eine gute Strategie, um React für neue Entwickler zu erlernen — lassen Sie sie klein anfangen, indem Sie die Grundlagen lernen, und schon bald werden sie keine Probleme haben, die nützlichsten Muster zu verwenden. Modularität ist ein Kernfaktor, der es leicht macht, über React-Apps nachzudenken.
Das Verständnis der Philosophie der Bibliothek und der grundlegenden Bausteine hilft Teams dabei, das Rendern von Komponenten bei Bedarf zu verbessern. In den meisten Fällen wird dies nicht erforderlich sein, da React sofort hervorragende Leistung und Sicherheit bietet.
<span class="colorbox1" fs-test-element="box1"><h3>Kurz gesagt, die Sicherheit, Skalierbarkeit und Wartung</h3> von <ol><li>React React eignet sich dank Virtual DOM und APIs wie createElement () hervorragend für die automatische Erkennung von Injektionsangriffen. Darüber hinaus können React-Apps mithilfe der Auto-Escaping-Funktion gesichert werden</li>. <li>React-Apps sind dank ihres modularen Charakters einfach zu skalieren — Komponenten lassen sich leicht extrahieren, zusammenführen und wiederverwenden.</li> <li>Die modulare Architektur von React vereinfacht die Wartung.</li> <li>Die Konzepte von React sind relativ einfach zu verstehen, sodass das Entwicklungsteam ohne zusätzliche Kosten geändert und erweitert werden kann.</li> <li>Dank Virtual DOM sind React-Apps standardmäßig sehr schnell. In komplexen Apps können zusätzliche Tools und Techniken (z. B. Memoisierung, Code-Splitting) verwendet werden, um unnötiges erneutes Rendern zu vermeiden</li></ol></span>.
Our promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.
Authors
Softwareingenieur und Tech-Teamleiter mit 12 Jahren Berufserfahrung. React.js & Node.js sind leidenschaftlich.
Enthusiast für Softwareentwicklung mit 9 Jahren Berufserfahrung in dieser Branche.
Softwareingenieur und Tech-Teamleiter mit 12 Jahren Berufserfahrung. React.js & Node.js sind leidenschaftlich.
Enthusiast für Softwareentwicklung mit 9 Jahren Berufserfahrung in dieser Branche.
Read next
Popular this month
previous article in this collection
It's the first one.
