React-Tutorial: Erste Schritte und Vergleiche

Frontend und insbesondere JavaScript sind eine fremde Welt. Die Menge an neuen Dingen, die täglich eingeführt werden, wird oft von Leuten belächelt, die nicht damit arbeiten, und von vielen, die dies tun. Trotzdem werden wir manchmal mit neuen Informationen, Bibliotheken und Diskussionen ein wenig überfordert, und wir hätten gerne etwas Stabiles, wie einen sicheren Hafen für Schiffe, in dem wir etwas länger bleiben können. In letzter Zeit scheint React dieser fügsame Hafen in einem Meer dynamischer JavaScript-Entwicklung zu sein.

Vor diesem Hintergrund haben wir uns entschieden, dieses mehrteilige React-Tutorial zu erstellen, um seine Fähigkeiten zu demonstrieren und zu sehen, wie es im Vergleich zu Angular und VueJS abschneidet.

Natürlich ist React nicht der einzige Hafen, den wir nutzen können, aber im Moment ist es eine der beliebtesten, stabilsten und innovativsten Lösungen, und obwohl es immer noch viele Upgrades gibt, sind sie eher eine Option für Verbesserungen als als eine Notwendigkeit für die Funktion.

Der Reaktionszustand im Jahr 2019

React ist eine Ansichtsbibliothek, die wir bereits 2011 zurückverfolgen können, als ihr erster Prototyp namens FaxJs auf ihrer Facebook-Seite erschien. React selbst wurde von Jordan Walke (der auch Autor des erwähnten Prototyps ist) bei JSConfUS vorgestellt 29. Mai 2013 und wurde am 2. Juli 2013 auf GitHub öffentlich zugänglich gemacht.

React gewann 2014 weiter an Popularität, als Konferenzen stattfanden, um die Community zu erweitern und React bekannt zu machen. Aus meiner Sicht war 2015 jedoch ein Meilensteinjahr für React – große Unternehmen (z. B. Airbnb und Netflix) begannen, React-Lösungen zu mögen und zu übernehmen. Außerdem erschien in diesem Jahr React Native. Die Idee hinter React Native war nicht ganz neu, aber interessant anzusehen, zumal sie von Facebook unterstützt wurde.

Eine weitere große Änderung war Redux, eine Flux-Implementierung. Dadurch wurde die Zustandsverwaltung viel zugänglicher und einfacher, was dies zur bisher erfolgreichsten Implementierung macht.

Zwischen damals und heute wurden viele andere Dinge verfügbar, darunter React-Tools, eine Umschreibung des Kernalgorithmus, Fiber, eine Änderung der semantischen Versionierung und so weiter. Schneller Vorlauf bis heute, wir sind bei 16.6.3, wahrscheinlich ein paar Wochen bevor die neue Version mit Hooks verfügbar wird (es sollte 16.7.0 sein, aber diese ist aufgrund einiger Korrekturen für React.lazy bereits veröffentlicht). React ist bekannt und stabil und bekommt großartige Meinungen.

Aber was ist Reagieren?

Nun, wenn Sie Front-End-Entwickler sind und noch nichts davon gehört haben, dann muss ich Ihnen gratulieren, denn das ist eine ziemliche Leistung.

Spaß beiseite, React ist eine deklarative komponentenbasierte Ansichtsbibliothek, die Ihnen hilft, eine Benutzeroberfläche zu erstellen. Es ist eine Bibliothek, kein Framework, obwohl viele Leute es zunächst als letzteres beschrieben haben.

Wenn wir Redux, React Router usw. hinzufügen, hat es offensichtlich alle notwendigen Dinge, um eine reguläre Single-Page-Anwendung zu erstellen, was ein Grund sein könnte, warum es manchmal fälschlicherweise als Framework und nicht als Bibliothek bezeichnet wird . Wenn überhaupt, könnte man argumentieren, dass der Begriff „Framework“ mit allen Komponenten dieser Umgebung zusammen einigermaßen passend ist, aber React für sich genommen nur eine Bibliothek ist.

Lassen Sie uns mit der Nomenklatur aufhören und uns darauf konzentrieren, was in React anders ist, auf die Dinge, die wir vor seiner Einführung nicht hatten. Zuallererst, wenn Sie zum ersten Mal an React denken, denken Sie an JSX, da es das erste ist, was Ihnen in den Sinn kommt, wenn Sie sich den Code ansehen. JSX ist eine JavaScript-Syntaxerweiterung, die etwas an HTML/XML erinnert. Bei React und JSX gibt es einige Unterschiede zu HTML, z. B. ist eine Klasse in React className , es gibt keinen tabindex sondern tabIndex , der Stil akzeptiert JavaScript-Objekte mit camelCased-Eigenschaften und so weiter.

Es gibt einige geringfügige Unterschiede, aber jeder sollte sie in kürzester Zeit abholen. Die Ereignisbehandlung erfolgt z. B. durch die Attribute onChange und onClick , die verwendet werden können, um eine Funktion zur Ereignisbehandlung hinzuzufügen. Außerdem können Komponenten später frei wiederverwendet und mithilfe von Requisiten angepasst werden, sodass es keinen Grund gibt, denselben Code mehrmals zu schreiben.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

Allerdings ist JSX in React eigentlich nicht zwingend notwendig. Sie können reguläre Funktionen schreiben, um Elemente zu erstellen, ohne JSX zu verwenden. Derselbe Code wie oben kann wie unten verwendet werden.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

Natürlich schlage ich nicht vor, dass Sie eine solche Syntax verwenden, obwohl es Fälle gibt, in denen sie nützlich sein könnte (z. B. wenn Sie eine wirklich kleine Sache einführen und die Build-Umgebung nicht ändern möchten).

Eigentlich habe ich einen anderen Grund, warum ich den Ausschnitt oben gezeigt habe. Oft verstehen Entwickler nicht, warum wir Folgendes tun müssen:

 import React from 'react';

Das Snippet sollte selbsterklärend sein. Obwohl wir Component extrahieren, brauchen wir immer noch React, weil Babel über JSX nach unter React.createElement . Wenn wir also React nicht importieren, wird es für uns einfach fehlschlagen. Ich habe Babel erwähnt, ein Tool, das uns dabei hilft, Dinge einzuführen, die noch nicht in JavaScript (oder eher in Browsern) oder irgendwie Erweiterungen davon sind (oder verschiedene Sprachen wie TypeScript, die Babel ab Babel 7 unterstützt). Danke an Babel:

• JSX wird in Funktionen umgewandelt, die vom Browser verstanden werden.
• Wir können neue Funktionen verwenden, die noch nicht in Browsern vorhanden sind (z. B. Klasseneigenschaften).
• Wir können Funktionen hinzufügen, die in neueren Browsern, aber nicht in älteren Browsern vorhanden sind, während die Unterstützung älterer Browser beibehalten wird.

Kurz gesagt, morgen ist heute in JavaScript; Dies ist wahrscheinlich etwas, das einen eigenen Artikel erfordern würde. Es ist erwähnenswert, dass der React-Import auch durch einige andere Techniken umgangen werden kann (wie das Einführen von ProvidePlugin über Webpack usw.), aber aufgrund des begrenzten Platzes hier werden wir dies vermeiden und davon ausgehen, dass der Benutzer die Create React App verwenden wird ( CRA) (mehr über dieses Tool wird später erwähnt).

Die zweite wichtige Sache und weitaus wichtiger als JSX selbst ist, dass React auf dem virtuellen DOM basiert. Kurz gesagt, das virtuelle DOM ist die Erinnerung an einen idealen Baum, der durch JavaScript dargestellt wird, das der Entwickler schreibt, das später mit dem realen DOM verglichen und in einem als Abgleich bezeichneten Prozess damit synchronisiert wird.

Wie ist React im Vergleich zu Angular und Vue?

Ich mag es überhaupt nicht, Bibliotheken zu vergleichen, besonders wenn wir gezwungen sind, Birnen mit Äpfeln zu vergleichen (Bibliotheken vs. Frameworks und so weiter).

Daher werde ich versuchen, React mit Angular und Vue zu vergleichen, indem ich eine Reihe kurzer Fragen und Antworten verwende, die nicht viel mit technischen Dingen zu tun haben, anstatt etwas zu sagen wie „X ist besser als Y, weil es JSX und keine Vorlagen verwendet. ” Punkte wie diese sind in der Regel persönliche Vorlieben, subjektive Entscheidungen. Auch Geschwindigkeit, Speicherzuweisung usw. sind in React und all seinen großen Konkurrenten ziemlich ähnlich (Angular und Vue kommen mir in den Sinn). Es gibt einen wirklich guten Bericht zu diesem Thema, aber bedenken Sie bitte Folgendes: Die allermeisten Anwendungen sehen nicht aus wie wirklich große Tabellen, die Zeilen in einer 10k-Tabelle vertauschen. Daher sind auch diese Ergebnisse ein reines Geschwindigkeitsexperiment. In der realen Welt würde man so etwas gar nicht machen.

Werfen wir also einen Blick auf einige Fragen zu React und wie es im Vergleich zur Konkurrenz abschneidet:

Ich möchte viele Jobmöglichkeiten haben. Wie beliebt ist React?

Nun, das ist einfach zu beantworten – wählen Sie „Reagieren“. Eigentlich würde ich sagen, dass React ungefähr 6-10 Mal (ziemlich große Spanne, aber es gibt einige Portale, wo es 1:50 ist und andere, wo es 1:6 ist) mehr Stellenangebote als Vue und 2-4 Mal mehr hat als eckig. Die Nachfrage nach React-Experten ist groß, warum also ist Vue auf GitHub so beliebt (es hat tatsächlich mehr Sterne als React), hat aber weniger Stellenangebote? Ich habe keine Ahnung.

Ich möchte eine große Community, viele Bibliotheken, schnelle Lösungen für auftretende Probleme.

Reagieren. Suchen Sie nicht weiter.

Ist es einfach zu bedienen und macht die Entwicklung Spaß?

Wieder einmal genießen laut den State of JS-Berichten für 2018 und 2017 sowohl React als auch Vue einen wirklich guten Ruf und die meisten Entwickler sagen, dass sie sie wieder verwenden würden. Angular hingegen neigt Jahr für Jahr dazu, immer mehr Leute zu sagen, dass sie es nicht mehr verwenden würden.

Ich möchte eine neue Single-Page-Anwendung erstellen, aber nicht nach Bibliotheken suchen.

Das ist wahrscheinlich der einzige Ort, an dem ich sagen würde, dass Angular die bessere Wahl ist.

Keine großen Konzerne. Ich möchte so unabhängig wie möglich sein, wofür soll ich mich entscheiden?

Vue – es ist das einzige unabhängige in unserem großen Trio. (Facebook unterstützt React, während Google hinter Angular steht.)

Einfachster Start und schnellste Lernkurve?

Sehen/Reagieren. Ich tendiere hier zu Vue, aber das ist nur meine persönliche Meinung.

Warum? Weil Sie JSX nicht einmal kennen müssen (es ist optional) und es im Grunde nur HTML + CSS + JavaScript ist.

React-Tutorial: Erste Schritte mit Ihrer ersten App

Der einfachste Weg, heute mit React zu beginnen, ist die Verwendung von CRA, einem CLI-Tool, das ein Projekt für Sie erstellt und Ihnen hilft, alle erforderlichen Einstellungen für Webpack/Babel und mehr zu vermeiden. Stattdessen verlassen Sie sich darauf, wie es standardmäßig konfiguriert ist und was im Laufe der Zeit darin enthalten ist. Dank dessen müssen Sie sich nicht um größere Updates für einige kritische Bibliotheken kümmern.

Natürlich können Sie sich später selbst „auswerfen“ und jeden einzelnen Aspekt selbst erledigen, indem Sie npm run eject . Dieser Ansatz hat seine eigenen Stärken, da Sie Ihre App mit Dingen erweitern können, die sonst nicht verfügbar wären (z. B. Dekorateure), aber er kann auch Kopfschmerzen bereiten, da er viele zusätzliche Dateien und viel mehr Zeit erfordert.

Also, das allererste, was zu tun ist:

 npx create-react-app {app-name}

Dann npm run start und schon kann es losgehen.

Klassen- vs. Funktionskomponenten

Wir sollten damit beginnen, zu erklären, wie sich diese Komponenten unterscheiden. Grundsätzlich kann jede Komponente eine Funktion oder Klasse sein. Der Hauptunterschied zwischen ihnen besteht darin, dass die Klasse 1 über einige Funktionen verfügt, die in der Funktionskomponente nicht verfügbar sind: Sie können einen Status haben und Refs, Lebenszyklus usw. verwenden. Das ist der aktuelle Stand der Dinge und ab Version 16.7 (oder wie auch immer). wegen bereits erwähnter Änderungen aufgerufen werden), werden wir auch Hooks haben, also werden State und Refs mit Hooks möglich sein.

Es gibt zwei Arten von Klassenkomponenten: Component und PureComponent . Der einzige Unterschied zwischen den beiden besteht darin, dass PureComponent Requisiten und Status oberflächlich vergleicht – es hat seine eigenen Vorteile in einer Situation, in der Sie keine „verschwendeten“ Renderings erstellen möchten, in denen sich eine Komponente und ihre Kinder in genau demselben Status befinden nach einem render. Dennoch ist es nur ein oberflächlicher Vergleich; Wenn Sie Ihren eigenen Vergleich implementieren möchten (z. B. weil Sie komplexe Requisiten übergeben), verwenden Sie einfach Component und überschreiben shouldComponentUpdate (das standardmäßig true zurückgibt). Seit 16.6+ ist etwas Ähnliches auch mit Funktionskomponenten verfügbar – dank React.memo , das eine Komponente höherer Ordnung ist und sich standardmäßig wie PureComponent verhält (flacher Vergleich), aber es braucht ein zweites Argument, mit dem Sie Ihren eigenen benutzerdefinierten Props-Vergleich übergeben können .

Als allgemeine Faustregel gilt: Wenn Sie die Funktionskomponente verwenden können (Sie benötigen keine Klassenmerkmale), dann verwenden Sie sie. Bald, beginnend mit 16.7.0, ist die Verwendung von Klassenkomponenten nur noch aufgrund von Lebenszyklusmethoden erforderlich. Ich neige dazu zu glauben, dass Funktionskomponenten transparenter, einfacher zu begründen und zu verstehen sind.

Lebenszyklusmethoden reagieren

Konstrukteur (Requisiten)

• Optional, insbesondere da CRA so beliebt ist, wo Klassenfelddeklarationen für JavaScript standardmäßig enthalten sind. Es ist sinnlos zu deklarieren, ob Sie Ihre Methoden per Pfeilfunktion innerhalb des Klassenkörpers binden. Ein ähnlicher Zustand kann auch als Klasseneigenschaft initialisiert werden.
• Sollte nur zum Initialisieren des lokalen Zustands für Objekt- und Bindungsmethoden in ES6-Klassen verwendet werden.

KomponenteDidMount()

• Führen Sie hier Ajax-Anrufe durch.
• Wenn Sie Ereignis-Listener, Abonnements usw. benötigen, fügen Sie sie hier hinzu.
• Sie können hier setState verwenden (aber es wird die Komponente neu rendern).

KomponenteWillUnmount()

• Bereinigt alles, was noch läuft – z. B. sollte Ajax unterbrochen, das Abonnement gekündigt, die Timer gelöscht werden und so weiter.
• Rufen setState nicht auf, da dies sinnlos ist, da die Komponente ausgehängt wird (und Sie eine Warnung erhalten).

componentDidUpdate(prevProps, prevState, Schnappschuss)

• Geschieht, wenn die Komponente gerade mit der Aktualisierung fertig ist (tritt beim anfänglichen Rendern nicht auf).
• Verfügt über drei Parameter, die optional verwendet werden können (vorherige Props, vorheriger Zustand und ein Snapshot, der nur angezeigt wird, wenn Ihre Komponente getSnapshotBeforeUpdate implementiert).
• Tritt nur auf, wenn shouldComponentUpdate true zurückgibt.
• Wenn Sie hier setState verwenden, sollten Sie es bewachen, sonst landen Sie in einer Endlosschleife.

shouldComponentUpdate(nextProps, nextState)

• Nur zur Leistungsoptimierung.
• Wenn es false zurückgibt, wird KEIN Render aufgerufen.
• PureComponent kann stattdessen verwendet werden, wenn das überschriebene SCO nur ein flacher Requisiten/Status-Vergleich ist.

getSnapshotBeforeUpdate()

• Kann verwendet werden, um einige Informationen über das aktuelle DOM zu speichern, z. B. die aktuelle Bildlaufposition, die später innerhalb von componentDidUpdate wiederverwendet werden kann, um die Position des Bildlaufs wiederherzustellen.

KomponenteDidCatch(Fehler, Info)

• Ein Ort, an dem Protokollierungsfehler auftreten sollten.
• Kann setState , wird aber in zukünftigen Versionen zugunsten der statischen Methode getDerivedStateFromError(error) fallen gelassen, die den Zustand aktualisiert, indem sie einen Wert zurückgibt, um den Zustand zu aktualisieren.

Es gibt zwei zusätzliche Methoden, die beide statisch sind und in anderen Erklärungen erwähnt wurden

statisch getDerivedStateFromError(Fehler)

• Fehlerinformationen finden Sie hier.
• Sollte einen Objektwert zurückgeben, der den Status aktualisiert, der zur Fehlerbehandlung verwendet werden kann (indem etwas angezeigt wird).
• Da es statisch ist, hat es keinen Zugriff auf die Komponenteninstanz selbst.

statisches getSnapshotBeforeUpdate(Requisiten, Zustand)

• Sollte in Fällen verwendet werden, in denen sich Requisiten im Laufe der Zeit ändern – zum Beispiel könnte es laut React-Dokumentation für eine Übergangskomponente nützlich sein.
• Da es statisch ist, hat es keinen Zugriff auf die Komponenteninstanz selbst.

Beachten Sie, dass ab heute einige weitere Methoden verfügbar sind, die jedoch in React 17.0 entfernt werden sollen, weshalb sie hier nicht erwähnt wurden.

Zustand vs. Requisiten

Beginnen wir mit Requisiten , da sie einfacher und schneller zu erklären sind. Requisiten sind Eigenschaften, die an die Komponente übergeben werden, die später darin wiederverwendet werden können, um Informationen/Geschäftslogik und dergleichen anzuzeigen.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

Im obigen Beispiel ist name eine Requisite. Requisiten sind schreibgeschützte Elemente und können nicht direkt in untergeordneten Komponenten geändert werden. Außerdem gibt es eine schlechte Praxis, die die Leute oft machen, und das ist, Requisiten an den Staat zu kopieren und danach mit dem Staat zu operieren. Natürlich gibt es Fälle, in denen Sie so etwas wie „Anfangsstatus, der die übergeordnete Komponente nach dem Senden aktualisieren wird“ machen möchten, aber das ist seltener – in einem solchen Szenario könnte die Eingabe des Anfangsstatus sinnvoll sein. Außerdem können nicht nur Eigenschaften wie Strings an untergeordnete Komponenten übergeben werden, sondern auch Zahlen, Objekte, Funktionen usw.

Props haben auch eine weitere nützliche Sache namens defaultProps , ein statisches Feld, das Ihnen sagen kann, was die Standardprops für eine Komponente sind (wenn sie zum Beispiel nicht an die Komponente weitergegeben werden).

Im Falle des „Hebens des Zustands“, wo eine Komponente (der Elternteil) einen Zustand hat, der später von seinen Kindern wiederverwendet wird (z. B. ein Kind zeigt ihn an und ein anderes erlaubt die Bearbeitung), dann müssen wir die Funktion von an das Kind weitergeben parent, wodurch wir den lokalen Status des übergeordneten Elements aktualisieren können.

State hingegen ist ein lokaler Zustand, der geändert werden kann, aber indirekt durch die Verwendung von this.setState . Wenn jemand den Zustand direkt mutieren würde, ist sich die Komponente der Änderung nicht bewusst und sie wird nicht neu gerendert, um die erwähnten Änderungen des Zustands widerzuspiegeln.

SetState ist eine Methode zum Ändern des lokalen Zustandsobjekts (durch eine flache Zusammenführung), und danach reagiert die Komponente darauf, indem sie sich selbst neu rendert. Beachten Sie, dass nach der Verwendung von setState die Eigenschaft this.state die in der Funktion erwähnten Änderungen nicht sofort widerspiegelt (sie hat asynchrone Natur), da einige Instanzen von setState aufgrund der Optimierung möglicherweise zusammengefasst werden. Es gibt einige Möglichkeiten, aufgerufen zu werden, wobei eine dieser Möglichkeiten es uns ermöglicht, direkt nach dem Aktualisieren des Status etwas mit der Komponente zu tun:

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) – dieses Formular ermöglicht es uns, callback anzuhängen, der aufgerufen wird, wenn der Zustand die Daten widerspiegelt, die wir haben wollten (im ersten Argument).

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

Kontext reagieren

React hat vor Kurzem die Kontext-API stabilisiert (die sich schon seit geraumer Zeit in React befand, aber ein experimentelles Feature war, obwohl sie von einigen der beliebtesten Bibliotheken wie Redux weit verbreitet war), was uns bei der Lösung eines Problems hilft: Props Drilling. Props Drilling ist kurz gesagt eine Möglichkeit, Props tief in die Struktur einzufügen – zB kann es sich um eine Art Thema für Komponenten, Lokalisierung für eine bestimmte Sprache, Benutzerinformationen und so weiter handeln. Vor Context (oder eher bevor es nicht-experimentell wurde) wurde es aufgebohrt, indem es rekursiv vom Elternteil zum Kind bis zum letzten Blatt ging (offensichtlich gab es Redux, das das Problem ebenfalls lösen konnte). Beachten Sie, dass diese Funktion NUR das Requisitenbohren löst und kein Ersatz für Dinge wie Redux oder Mobx ist. Wenn Sie nur dafür eine Zustandsverwaltungsbibliothek verwenden, können Sie diese natürlich frei ersetzen.

Einpacken

Damit ist der erste Teil unseres React-Tutorials abgeschlossen. In den kommenden Artikeln hoffen wir, fortgeschrittenere Themen zu behandeln, die von Styling und Überprüfungstypen bis hin zu Produktionsbereitstellung und Leistungsoptimierung reichen.